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

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

生成表单输入字段的状态为：

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

---

您只需按项目组分割项目，然后进行渲染。我将使组成为一个组件，以便它处理标签和输入的渲染

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

const Form=props=>{
常量itemsByGroup={}；
props.items.forEach（item=>{
如果（！itemsByGroup[item.group]）{
itemsByGroup[项目组]=[]；
}
itemsByGroup[item.group]。推送（item）；
});
返回(
{Object.keys（itemsByGroup.map）（groupName=>(
))}
props.handleSubmit（）}>Submit
);
};
const FormGroup=（{label，fields，handleChange}）=>(
{label}：
{fields.map（field=>(
handleChange（e）}
/>
))}
);

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

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>
  );
};

const Form=props=>{
常量itemsByGroup={}；
props.items.forEach（item=>{
如果（！itemsByGroup[item.group]）{
itemsByGroup[项目组]=[]；
}
itemsByGroup[item.group]。推送（item）；
});
返回(
{Object.keys（itemsByGroup.map）（groupName=>(
{label}：
{fields.map（field=>(
handleChange（e）}
/>
))}
))}
props.handleSubmit（）}>Submit
);
};

哦，太棒了！工作完美！Thanks@user8306074是的！我使用了一个常量映射器，这样它就可以对您经过的任意数量的组进行动态映射。可以对标签元素应用样式，如

文本转换：大写例如，将组标题大写。：）酷！我喜欢你融入动态部分的方式。！谢谢，这是我的密码。我发现很难把你的改变融入其中。你能帮我吗？我不想创建一个单独的组件；是否有任何方法可以在同一组件中显示项目组。因为，如果我这样做，那么我将不得不改变映射值和名称的整个逻辑，这是一个相当繁琐的过程。
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>
  );
};