Question

我有一个表单，可以在其中添加/删除组和输入项，我可以使输入字段的组工作，但是我在受尊重的组中输入的项遇到麻烦：

我在此处创建了一个代码沙箱：https://codesandbox.io/s/twilight-cache-4ipv6?file=/src/Form.jsx

如果单击Add Items +按钮，然后在项目字段中键入，则该值将重复到所有字段。

另外，有时我感觉x按钮不起作用，只会删除最后一项或其他内容，我相信这是“受控组件”？

此外，我想问一下我在做什么，是否有更好的方法？我要编写的代码似乎有很多复杂性。我觉得我写了太多的set状态挂钩。

Answer 1

我认为我们不需要那种fields状态。

我们可以像这样更新Add Handlers


  const handleAddGroup = i => {
    const newGroup = [...group];
    newGroup.push({
      id: null,
      cat: "",
      items: [
        {
          name: "",
          value: ""
        }
      ]
    });

    setGroups(newGroup);
  };

  const handleAddField = i => {
    setGroups(state => {
      const stateCopy = JSON.parse(JSON.stringify(state));

      stateCopy[i].items.push({
        name: "",
        value: ""
      });

      return stateCopy;
    });
  };

https://codesandbox.io/s/cool-frog-2yrlt

ReactJS复杂表单输入字段在多个输入字段中复制文本

1 个答案: