Question

我有一个表单，其中所有输入、选择标签都是单独的组件，每个组件但提交按钮都是它自己喜欢的表单-

<form>
 <InputComp1 />
 <InputComp2 />
 <Select1 />
 <Select2 />
 <button type='submit' value='Register'/>
</form>

那么我如何从各种组件收集所有状态，当用户点击提交时，值被提交。？这种处理表单的方法对吗？还是应该管理同一个组件中所有标签的状态？

Answer 1

管理此组件中所有输入/选择的状态。您可以使用 props 将值和处理函数传递给输入。

Answer 2

没有“正确”的方法，答案取决于上下文。

您可以将 form 作为受控组件，按照您的建议和提到的方式管理所有标签的状态（同时将回调传递到树中）in docs .

或者，您可以将其作为不受控制的组件，例如：

const Input = ({ name }) => {
  return <input name={name} />;
};

const Component = () => {
  return (
    <>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const data = new FormData(e.target);
          const entries = data.entries();
          for (let entry of entries) {
            console.log(entry);
          }
        }}
      >
        <Input name="username" />
        <Input name="email" />
        <input type="submit" value="Submit" />
      </form>
    </>
  );
};

见controlled vs uncontrolled components。

Answer 3

是的，您应该在父组件本身中管理状态，并将该字段的 onchange 处理程序和值作为道具传递给子组件以更新表单字段的值。

Answer 4

解决方案#1 将是“管理状态反应方式”。有了这个，你应该存储你需要在它们共同祖先中某个地方的组件之间共享的状态。在您的情况下，它将是包含表单的组件

解决方案#2 仅适用于您使用真实表单和表单控件的情况。处理表单中的“提交”事件，并从 form data 获取您需要提交的所有内容。

解决方案#3 仅在您使用某种“状态管理器”时才适用。遵循您使用的库的说明和最佳做法。

在某些情况下，您可以混合搭配这些解决方案。例如，无论解决方案如何，我仍然建议在表单上处理“提交”事件。

Answer 5

react 中有一个状态提升的概念：在这里为每个子组件创建一个受控表单，组件传递一个函数以将数据从子组件获取到父组件。通过这样做，您可以一次提交所有值。

这是例子

import React, {useState} from 'react';

const ChildInput = ({onChange, id}) => {
 return(
      <input
        key={id}
        type="text"
        placeholder="enter name"
        onChange={onChange}
       />
   )
}

const Parent = () => {
 const [name, setName] = useState('');
const onSubmit =(e)=>{
e.preventDefault();
// append your all data here just like child component
data = {name}
}
return(
   <form onSubmit={onSubbmit}>
   <ChildInput onChange={()=>setName(e.target.value)} id="name" />
    <button type="submit" value="submit"/>
   </form>

)}

欲了解更多信息，请查看此：https://reactjs.org/docs/glossary.html#controlled-vs-uncontrolled-components

如何从组件访问状态到父组件

5 个答案: