如何从组件访问父组件的状态答案

【问题标题】：How to access state from components to the parent component如何从组件访问父组件的状态
【发布时间】：2021-02-27 15:56:53
【问题描述】：

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

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

那么我如何收集来自各个组件的所有状态以及当用户单击提交时，值会被提交。？这种方法在处理表单时是否正确？还是应该管理同一组件中所有标签的状态？

【问题讨论】：

标签： reactjs

【解决方案1】：

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案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

【讨论】：