我有以下结构：
FormEditor- 拥有多个 FieldEditor 实例
FieldEditor- 编辑表单的一个字段并在其状态下保存有关它的各种值
当在 FormEditor 中单击按钮时，我希望能够从所有FieldEditor组件中收集有关字段的信息、处于其状态的信息，并将其全部包含在 FormEditor 中。
我考虑将有关字段的信息存储FieldEditor在FormEditor's 状态之外，而是将其放入's 状态。但是，这需要FormEditor在每个FieldEditor组件发生变化时监听它们并将其信息存储在其状态中。
我不能只访问孩子的状态吗？理想吗？
在我详细介绍如何访问子组件的状态之前，请务必阅读Markus-ipse的回答，了解处理此特定场景的更好解决方案。
如果您确实希望访问组件子组件的状态，您可以ref为每个子组件分配一个属性。现在有两种方法可以实现引用：使用引用React.createRef()和回调引用。
React.createRef()从 React 16.3 开始，这是目前推荐的使用引用的方式（有关更多信息，请参阅文档）。如果您使用的是早期版本，请参阅下面有关回调引用的信息。
您需要在父组件的构造函数中创建一个新引用，然后通过ref属性将其分配给子组件。
class FormEditor extends React.Component {
constructor(props) {
super(props);
this.FieldEditor1 = React.createRef();
}
render() {
return <FieldEditor ref={this.FieldEditor1} />;
}
}
为了访问这种引用，您需要使用：
const currentFieldEditor1 = this.FieldEditor1.current;
这将返回一个已安装组件的实例，以便您可以使用它currentFieldEditor1.state来访问状态。
快速说明一下，如果您在 DOM 节点而不是组件（例如<div ref={this.divRef} />）上使用这些引用，那么this.divRef.current将返回底层 DOM 元素而不是组件实例。
此属性采用一个回调函数，该函数传递了对附加组件的引用。该回调在组件挂载或卸载后立即执行。
例如：
<FieldEditor
ref={(fieldEditor1) => {this.fieldEditor1 = fieldEditor1;}
{...props}
/>
在这些示例中，引用存储在父组件上。要在您的代码中调用此组件，您可以使用：
this.fieldEditor1
然后用于this.fieldEditor1.state获取状态。
需要注意的一件事，请确保您的子组件在尝试访问之前已呈现 ^_^
如上所述，如果您在 DOM 节点而不是组件（例如<div ref={(divRef) => {this.myDiv = divRef;}} />）上使用这些引用，那么this.divRef将返回底层 DOM 元素而不是组件实例。
如果你想了解更多关于 React 的 ref 属性，请查看Facebook 的这个页面。
确保您阅读了“不要过度使用参考资料”部分，该部分说您不应该使用孩子的资料state来“使事情发生”。
如果您已经有一个用于各个 FieldEditor 的 onChange 处理程序，我不明白为什么您不能将状态向上移动到 FormEditor 组件，然后将回调从那里传递给将更新父状态的 FieldEditor。对我来说，这似乎是一种更符合 React 的方式。
可能是这样的：
const FieldEditor = ({ value, onChange, id }) => {
const handleChange = event => {
const text = event.target.value;
onChange(id, text);
};
return (
<div className="field-editor">
<input onChange={handleChange} value={value} />
</div>
);
};
const FormEditor = props => {
const [values, setValues] = useState({});
const handleFieldChange = (fieldId, value) => {
setValues({ ...values, [fieldId]: value });
};
const fields = props.fields.map(field => (
<FieldEditor
key={field}
id={field}
onChange={handleFieldChange}
value={values[field]}
/>
));
return (
<div>
{fields}
<pre>{JSON.stringify(values, null, 2)}</pre>
</div>
);
};
// To add the ability to dynamically add/remove fields, keep the list in state
const App = () => {
const fields = ["field1", "field2", "anotherField"];
return <FormEditor fields={fields} />;
};
原始 - 预挂钩版本：
现在是2020 年，你们中的很多人会来这里寻找类似的解决方案，但使用Hooks（它们很棒！）以及代码清洁度和语法方面的最新方法。
因此，正如之前的答案所述，解决此类问题的最佳方法是将状态保持在子组件之外fieldEditor。你可以通过多种方式做到这一点。
最“复杂”的是父和子都可以访问和修改的全局上下文（状态）。当组件在树层次结构中非常深时，这是一个很好的解决方案，因此在每个级别发送props的成本很高。
在这种情况下我认为不值得，更简单的方法会给我们带来我们想要的结果，只需使用强大的React.useState().
如前所述，我们将处理更改并将子组件的数据存储fieldEditor在父组件中fieldForm。为此，我们将发送对将处理更改并将更改应用于fieldForm状态的函数的引用，您可以这样做：
function FieldForm({ fields }) {
const [fieldsValues, setFieldsValues] = React.useState({});
const handleChange = (event, fieldId) => {
let newFields = { ...fieldsValues };
newFields[fieldId] = event.target.value;
setFieldsValues(newFields);
};
return (
<div>
{fields.map(field => (
<FieldEditor
key={field}
id={field}
handleChange={handleChange}
value={fieldsValues[field]}
/>
))}
<div>{JSON.stringify(fieldsValues)}</div>
</div>
);
}
请注意，React.useState({})将返回一个数组，其中位置 0 是调用时指定的值（在本例中为 Empty 对象），位置 1 是对修改该值的函数的引用。
现在有了子组件，FieldEditor您甚至不需要创建带有 return 语句的函数。一个带有箭头函数的精益常量就可以了！
const FieldEditor = ({ id, value, handleChange }) => (
<div className="field-editor">
<input onChange={event => handleChange(event, id)} value={value} />
</div>
);
Aaaaand 我们完成了，仅此而已。仅通过这两个纤细的功能组件，我们的最终目标就是“访问”我们的孩子FieldEditorvalue并在我们的父母中展示它。
你可以查看 5 年前接受的答案，看看 Hooks 如何使 React 代码更精简（很多！）。
正如前面的答案所说，尝试将状态移动到顶部组件并通过传递给其子组件的回调来修改状态。
如果你真的需要访问被声明为功能组件（钩子）的子状态，你可以在父组件中声明一个ref，然后将它作为ref属性传递给子组件，但你需要使用React .forwardRef然后钩子useImperativeHandle来声明一个可以在父组件中调用的函数。
看看下面的例子：
const Parent = () => {
const myRef = useRef();
return <Child ref={myRef} />;
}
const Child = React.forwardRef((props, ref) => {
const [myState, setMyState] = useState('This is my state!');
useImperativeHandle(ref, () => ({getMyState: () => {return myState}}), [myState]);
})
然后你应该能够通过调用在 Parent 组件中获取 myState ：
myRef.current.getMyState();
现在您可以访问 InputField 的状态，它是 FormEditor 的子级。
基本上，每当输入字段（子项）的状态发生变化时，我们都会从事件对象中获取值，然后将该值传递给父级，在父级中设置了父级的状态。
单击按钮时，我们只是打印输入字段的状态。
这里的关键点是我们使用 props 来获取输入字段的id/value，并在我们生成可重用的子输入字段时调用在输入字段上设置为属性的函数。
class InputField extends React.Component{
handleChange = (event)=> {
const val = event.target.value;
this.props.onChange(this.props.id , val);
}
render() {
return(
<div>
<input type="text" onChange={this.handleChange} value={this.props.value}/>
<br/><br/>
</div>
);
}
}
class FormEditorParent extends React.Component {
state = {};
handleFieldChange = (inputFieldId , inputFieldValue) => {
this.setState({[inputFieldId]:inputFieldValue});
}
// On a button click, simply get the state of the input field
handleClick = ()=>{
console.log(JSON.stringify(this.state));
}
render() {
const fields = this.props.fields.map(field => (
<InputField
key={field}
id={field}
onChange={this.handleFieldChange}
value={this.state[field]}
/>
));
return (
<div>
<div>
<button onClick={this.handleClick}>Click Me</button>
</div>
<div>
{fields}
</div>
</div>
);
}
}
const App = () => {
const fields = ["field1", "field2", "anotherField"];
return <FormEditorParent fields={fields} />;
};
ReactDOM.render(<App/>, mountNode);