react中函数式props实现父取子组件值
时间: 2024-03-26 07:40:36 浏览: 18
在React中,可以通过将函数作为props传递给子组件,从而实现父组件获取子组件的值。
首先,在父组件中定义一个函数,并将其作为props传递给子组件。该函数将子组件的值作为参数,并将其存储在父组件的状态中。
```jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [childValue, setChildValue] = useState('');
function handleChildValue(value) {
setChildValue(value);
}
return (
<div>
<ChildComponent handleChildValue={handleChildValue} />
<p>Child value: {childValue}</p>
</div>
);
}
```
在子组件中,调用父组件传递的函数,并将子组件的值作为参数传递给该函数。
```jsx
import React, { useState } from 'react';
function ChildComponent(props) {
const [childValue, setChildValue] = useState('');
function handleChange(event) {
const value = event.target.value;
setChildValue(value);
props.handleChildValue(value);
}
return (
<div>
<input type="text" value={childValue} onChange={handleChange} />
</div>
);
}
```
这样,当子组件的值发生变化时,父组件就可以获取并显示子组件的值了。