javascript - 以自定义方式显示输入字段

Question

我有一个动态表单。我的输入字段属于不同的组。我想找出一种方法来分组显示它们。

生成表单输入字段的状态是:

random:
{
name: "emp1", group: "employee",
name: "emp2", group: "employee",
name: "emp3", group: "employee",
name: "man1", group: "manager",
name: "man2", group: "manager"

}

我的动态表单如下:

const Form = (props) => {
  return (

    <div>
      {props.items.map(item => (
          name={item.key_name}
          value={item.key_value}
          onChange={e => props.handleChange(e)}
        />
      )
      )}

      <button onClick={() => props.handleSubmit()} >
       Submit
      </button>

    </div>

  )
}
export default Form

现在我的字段在一条水平线上并排生成但我想将它们分组显示；所以像这样:

Employee: (3 input fields)
Manager: (2 input fields)

Answer 1

您只需要按组拆分您的项目，然后渲染它们。我会让该组成为一个组件，以便它处理渲染标签和输入

const Form = props => {
  const itemsByGroup = {};
  props.items.forEach(item => {
    if (!itemsByGroup[item.group]) {
      itemsByGroup[item.group] = [];
    }
    itemsByGroup[item.group].push(item);
  });
  return (
    <div>
      {Object.keys(itemsByGroup).map(groupName => (
        <FormGroup
          label={groupName}
          fields={itemsByGroup[groupName]}
          handleChange={props.handleChange}
          key={groupName}
        />
      ))}

      <button onClick={() => props.handleSubmit()}>Submit</button>
    </div>
  );
};

const FormGroup = ({ label, fields, handleChange }) => (
  <div>
    <label>{label}:</label>
    {fields.map(field => (
      <input
        name={field.key_name}
        value={field.key_value}
        onChange={e => handleChange(e)}
      />
    ))}
  </div>
);

See a live example here to play with

编辑

如果你必须把它放在一个组件中你可以这样做

const Form = props => {
  const itemsByGroup = {};
  props.items.forEach(item => {
    if (!itemsByGroup[item.group]) {
      itemsByGroup[item.group] = [];
    }
    itemsByGroup[item.group].push(item);
  });
  return (
    <div>
      {Object.keys(itemsByGroup).map(groupName => (
        <div>
          <label>{label}:</label>
          {fields.map(field => (
            <input
              name={field.key_name}
              value={field.key_value}
              onChange={e => handleChange(e)}
            />
          ))}
        </div>
      ))}

      <button onClick={() => props.handleSubmit()}>Submit</button>
    </div>
  );
};