单击表单对象中的react react js添加输入字段

debugcn 发表于 Dev

帕万莱

我从react应用程序获取以下代码段以生成表单的输入字段：

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",
        },
      },
    ],
  });

生成输入字段的代码段：

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

并在按钮上附加一个按钮和功能，以添加另一组[网络，用户名，网址]

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

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

使用handelAddField I可以看到将对象推入状态的控件数组，但不会在表单中生成输入字段。

更新资料

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

帕万莱

找到了我自己的解决方案：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。