react 调用子组件方法
时间: 2023-06-21 10:10:42 浏览: 80
在 React 中,你可以通过 `ref` 属性获取到子组件的实例,然后调用其方法。
例如,假设你有一个名为 `Child` 的子组件,其中包含一个名为 `handleClick` 的方法:
```jsx
class Child extends React.Component {
handleClick() {
console.log('Button clicked');
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}
}
```
现在,在父组件中,你可以通过 `ref` 属性获取到 `Child` 实例,然后调用其 `handleClick` 方法:
```jsx
class Parent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.childRef.current.handleClick();
}
render() {
return (
<div>
<Child ref={this.childRef} />
<button onClick={this.handleClick}>Click child button</button>
</div>
);
}
}
```
在这个例子中,`Parent` 组件通过 `ref` 属性获取到 `Child` 组件实例,并将其保存在 `childRef` 属性中。然后,当父组件中的按钮被点击时,`handleClick` 方法会调用 `Child` 组件实例的 `handleClick` 方法。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)