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

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

您只需要按项目组划分项目，然后渲染它们。我将组作为一个组件，以便它处理呈现标签以及输入

config.input_class = 'form-control'

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 => (
        <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>
);