子函数组件向父函数组件传值
时间: 2023-06-23 20:50:41 浏览: 53
在 React 中,子函数组件向父函数组件传递值也需要使用回调函数。具体步骤如下:
1. 在父函数组件中定义一个处理子函数组件传递值的函数,并将其作为 props 传递给子函数组件。
```javascript
function ParentComponent() {
const [value, setValue] = useState("");
function handleChildValue(childValue) {
setValue(childValue);
}
return (
<div>
<ChildComponent onValueChange={handleChildValue}/>
<p>{value}</p>
</div>
);
}
```
2. 在子函数组件中触发父函数组件传递的回调函数,并将需要传递的值作为参数传递给它。
```javascript
function ChildComponent(props) {
const [inputValue, setInputValue] = useState("");
function handleChange(event) {
setInputValue(event.target.value);
props.onValueChange(event.target.value);
}
return (
<div>
<input type="text" value={inputValue} onChange={handleChange}/>
</div>
);
}
```
在子函数组件中,每当输入框的值发生变化时,就会触发 handleChange 函数,该函数会同时更新子函数组件的状态和触发父函数组件传递的回调函数。父函数组件接收到子函数组件传递的值后,就会更新自己的状态并重新渲染。这样就完成了子函数组件向父函数组件传递值的过程。