react子组件给父组件传递一个方法怎么做
时间: 2023-11-03 13:06:24 浏览: 86
React 子组件向父组件传值的方法
5星 · 资源好评率100%
可以在子组件的props中定义一个函数属性,然后在子组件内部调用该函数,在调用时传入需要传递给父组件的参数。在父组件中,可以在调用子组件时将自己的方法传递给子组件的props中定义的函数属性。这样子组件就可以将参数传递给父组件的方法了。具体代码如下:
父组件:
```
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.handleChildClick = this.handleChildClick.bind(this);
}
handleChildClick(param) {
// 处理子组件传递的参数
}
render() {
return (
<ChildComponent onChildClick={this.handleChildClick} />
);
}
}
```
子组件:
```
class ChildComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
const param = 'example param';
// 调用父组件传递的方法,并传入参数
this.props.onChildClick(param);
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}
}
```
阅读全文