React中逆向传值方式
时间: 2023-06-22 07:43:37 浏览: 162
React父子组件间的传值的方法
在React中,父组件可以通过props将数据传递给子组件,而子组件可以通过回调函数将数据传递给父组件,实现逆向传值。
具体实现方式如下:
1. 父组件定义一个状态state,并将其作为props传递给子组件。
```
class Parent extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
render() {
return (
<Child value={this.state.value} onChange={(value) => this.setState({ value })} />
);
}
}
```
2. 子组件通过props获取父组件传递的值,并通过回调函数将修改后的值传递给父组件。
```
class Child extends React.Component {
render() {
const { value, onChange } = this.props;
return (
<input type="text" value={value} onChange={(e) => onChange(e.target.value)} />
);
}
}
```
这样,当子组件的值发生改变时,会触发onChange回调函数,将修改后的值传递给父组件,从而实现逆向传值。
阅读全文