react父组件怎么获取子组件的值

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

以下是一个示例：

父组件：

import React, { useState } from 'react';import ChildComponent from './ChildComponent';function ParentComponent() {  const [childValue, setChildValue] = useState('');  const handleChildValueChange = (value) => {    setChildValue(value);  };  return (    <div>      <ChildComponent onValueChange={handleChildValueChange} />      <p>子组件的值：{childValue}</p>    </div>  );}export default ParentComponent;

子组件：

import React, { useState } from 'react';function ChildComponent({ onValueChange }) {  const [value, setValue] = useState('');  const handleChange = (event) => {    const newValue = event.target.value;    setValue(newValue);    onValueChange(newValue);  };  return (    <input type="text" value={value} onChange={handleChange} />  );}export default ChildComponent;

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

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

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

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

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

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

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