从表单对象单击反应 js 时添加输入字段答案

【问题标题】：Add input field on click react js from form object从表单对象单击反应 js 时添加输入字段
【发布时间】：2020-06-27 07:33:19
【问题描述】：

我的 react 应用中有以下 sn-p 来为我的表单生成输入字段：

const [profiles, setProfiles] = useState({
    controls: [
      {
        network: {
          elementType: "input",
          elementConfig: {
            type: "text",
            label: "Network",
          },
          value: "Twitter",
        },
      },
      {
        username: {
          elementType: "input",
          elementConfig: {
            type: "text",
            label: "Username",
          },
          value: "@john",
        },
      },
      {
        url: {
          elementType: "input",
          elementConfig: {
            type: "url",
            label: "URL",
          },
          value: "https://example.co",
        },
      },
    ],
  });

代码 sn-p 生成输入字段：

 const profilesControls = (controls) => {
  const formElementsArray = controls.map((item,index) =>({
    id: Object.keys(item)[0],
    index:index,
    config: item[Object.keys(item)[0]],
  }))
  return formElementsArray;
}

  let profileField = profilesControls.map((formElement) => (
    <Input
      label={formElement.config.elementConfig.label}
      key={formElement.index}
      type={formElement.config.elementType}
      elementConfig={formElement.config.elementConfig}
      value={formElement.config.value}
      changed={(event) =>
        arrayInputHandler(event, formElement.index, formElement.id)
      }
    />
  ));

并在按钮上附加一个按钮和功能，添加另一组[network, username, url]

  const handelAddField = () => {
    const fields = [...profiles.controls];

    fields.map((item, i) => {
      setProfiles({...profiles, controls: [...profiles.controls, item]})
    });
    console.log(profiles.controls);
  };

使用handelAddField ，我可以看到对象被推入状态的控件数组中，但表单中没有生成输入字段。

更新

现在只生成一个输入字段，即 URL

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

你们都应该setProfiles 来更新状态。

而不是profiles.controls.push(item) 使用：

setProfiles({...profiles, controls: [...profiles.controls, item]})

【讨论】：

哦，谢谢，我完全错过了。但是将它放在地图函数中只是添加最后一个输入字段url

【解决方案2】：

找到我自己的解决方案：

  const handelAddField = () => {
    const fields = [...profiles.controls];
    fields.map((item, i) => {
      fields.push(item);
    });
    setProfiles((prev) => ({
      ...prev,
      controls:fields
    }));
  };

【讨论】：