如何在react父组件中获取子组件的值

在React中，父组件可以通过props向子组件传递值，并通过回调函数从子组件获取值。

这是一个示例：

父组件：

导入 span> React, { useState } 来自 '反应' ;导入 ChildComponent 来自< /span > './ChildComponent';函数 ParentComponent () { const [childValue, setChildValue] = useState(''); 常量 handleChildValueChange = (值) => { setChildValue(value); }; 返回 (<div> <ChildComponent onValueChange=< span class="hljs-string">{handleChildValueChange} /> <p>< /span>子组件的值：{childValue}p>  div> );}导出 < span class="hljs-keyword">默认 父组件;

子组件：

导入 React , { useState } 来自 'react';函数 ChildComponent({ onValueChange }) { const [值, setValue] = useState('' ); const handleChange = (事件) = > { const newValue = 事件。目标。值； setValue(newValue); onValueChange(newValue); }; 返回 (<输入 span> 类型="文本" 值={value} onChange={handleChange} /> );}导出 default ChildComponent;

在父组件中，使用useState钩子创建状态变量childValue来存储子组件的值。

然后，定义一个回调函数handleChildValueChange，当子组件的值发生变化时会调用该函数，并将新值更新到childValue变量中。

在子组件中，使用useState钩子创建一个状态变量值来存储输入框的值。

然后，定义一个handleChange函数，当输入框的值发生变化时会调用该函数，并将新值更新到value变量中。

同时，onValueChange回调函数p调用父组件的assed，并将新值作为参数传递给父组件。

最后，在父组件中，通过将handleChildValueChange函数传递给子组件的onValueChange属性，父组件获取子组件的值。

当子组件输入框的值发生变化时，父组件会自动更新并显示最新的值。