react 子组件修改父组件值 useState
时间: 2023-09-08 11:12:59 浏览: 53
在 React 中,子组件可以通过 props 将数据传递给父组件,但是无法直接修改父组件的值。如果你想要在子组件中修改父组件的值,可以通过回调函数的方式来实现。
首先,在父组件中定义一个状态和一个用于修改状态的函数,可以使用 useState 来管理状态。然后将状态和修改状态的函数通过 props 传递给子组件。
```jsx
import React, { useState } from 'react';
function ParentComponent() {
const [value, setValue] = useState('');
const handleChange = (newValue) => {
setValue(newValue);
};
return (
<div>
<ChildComponent value={value} onChange={handleChange} />
</div>
);
}
function ChildComponent({ value, onChange }) {
const handleInputChange = (event) => {
const newValue = event.target.value;
onChange(newValue);
};
return (
<input type="text" value={value} onChange={handleInputChange} />
);
}
```
在子组件中,通过调用 onChange 回调函数并传递新的值来修改父组件的值。父组件中的 setValue 函数将会更新父组件的状态,并且子组件中的输入框会显示最新的值。
这样,当子组件中的输入框的值发生变化时,会触发 onChange 回调函数,在父组件中更新状态,并且将新的值传递给子组件,从而实现了子组件修改父组件的值的效果。