从 React 中附加的子组件获取值

Question

我有一个主要的反应组件，它在按钮单击时附加子组件说<Child />

我的Child 组件的格式为

<form>
    <input .... />
    <button type="submit">Submit</button>
<form>

现在我需要从每个附加的 Child 组件中获取这些 input 元素的值，但我无法找到这样做的方法。

我不知道会添加多少个Child 组件，因为用户可以多次单击该按钮以附加另一个<Child />，因此我无法从子级导出固定数量的变量组件到父组件中的变量。

任何建议都将受到高度赞赏。

编辑：

附加孩子的代码：

• submit 函数：

const [val, setVal] = useState([]);

const submit = () => {
    setVal([...val, <Child />]);
}

• 附加按钮：

<Button onClick={submit}>Add Child</Button>

• 渲染：

{val}

由于val 是一个数组，它会打印其中的所有组件

Answer 1

我冒昧了，因为我不知道所有表单的预期输出是什么。

我基本上所做的是创建一个类似映射的结构，在其中我将映射每个子表单及其值（取决于您的需要可以修改），然后我按顺序将submit 函数传递给子组件将值存储在父级上。

通过这种方式，在子提交时，我将能够获取从子传递的值及其索引。

父组件

const Parent = () => {
  const [val, setVal] = useState([]);
  // Map like structure to store the values (is just an example, you can use whatever you want)
  const [mapOfValues, setMapOfValues] = useState({});

  // Pass submit function as prop
  const submit = () => {
    setVal([...val, <Child submit={onChildSubmit} />]);
  };

  // Submit function that stores the value for the child
  const onChildSubmit = (childIndex, value) => {
    setMapOfValues({
      ...mapOfValues,
      [childIndex]: value
    });
  };

  return (
    <div className="App">
      {val.map((value, index) =>
        // Key to prevent React warning and childIndex to map the value to the child form
        React.cloneElement(value, { key: index, childIndex: index })
      )}
      <button onClick={submit}>Add</button>
    </div>
  );
}

子组件

const Child = (props) => {
  const [value, setValue] = useState("");

  const submitForm = (e) => {
    e.preventDefault();
    props.submit(props.childIndex, value);
  };

  return (
    <form onSubmit={submitForm}>
      <input onChange={(e) => setValue(e.target.value)} value={value} />
      <button>Submit</button>
    </form>
  );
};

完成后，如果您想从父组件提交，您可以使用reduce、map 或任何您需要的格式来设置您想要的值。

沙盒的链接是this

如果您有任何其他问题，请告诉我。