父组件调用子组件的方法
时间: 2023-10-07 18:06:21 浏览: 39
在React中,如果需要从父组件调用子组件的方法,可以通过refs来实现。具体步骤如下:
1. 在子组件中添加ref属性
在子组件的render方法中,添加ref属性,例如:
```
class ChildComponent extends React.Component {
doSomething() {
console.log('Child Component do something!');
}
render() {
return (
<div>Child Component</div>
)
}
}
class ParentComponent extends React.Component {
handleClick() {
// 调用子组件的方法
this.child.doSomething();
}
render() {
return (
<div>
<ChildComponent ref={c => this.child = c} />
<button onClick={this.handleClick.bind(this)}>调用子组件方法</button>
</div>
)
}
}
```
2. 在父组件中获取子组件实例
在父组件中,通过ref属性获取子组件实例,例如:
```
<ChildComponent ref={c => this.child = c} />
```
这样,this.child就是子组件的实例了。
3. 在父组件中调用子组件的方法
在父组件中,通过子组件实例调用子组件的方法,例如:
```
this.child.doSomething();
```
这样就可以在父组件中调用子组件的方法了。