setup子组件调用父组件方法并传参
时间: 2023-11-03 12:18:00 浏览: 142
在 React 中,子组件可以通过 props 接收父组件的方法,并将参数传递给父组件。下面是一个示例:
父组件:
```jsx
import React from 'react';
class ParentComponent extends React.Component {
handleChildClick = (param) => {
console.log(`Received parameter from child: ${param}`);
}
render() {
return (
<div>
<ChildComponent handleClick={this.handleChildClick} />
</div>
);
}
}
export default ParentComponent;
```
子组件:
```jsx
import React from 'react';
class ChildComponent extends React.Component {
handleClick = () => {
const param = 'Hello from child';
this.props.handleClick(param);
}
render() {
return (
<button onClick={this.handleClick}>Click me</button>
);
}
}
export default ChildComponent;
```
在上面的示例中,父组件中定义了一个名为 `handleChildClick` 的方法,并将它传递给子组件 `ChildComponent` 的 `handleClick` 方法。当子组件中的按钮被点击时,`handleClick` 方法会触发,并调用父组件中的 `handleChildClick` 方法,并将参数传递给它。
这样,你就可以在父组件中处理子组件传递的参数了。注意,子组件中的点击事件可以是任何触发父组件方法的行为,不一定是按钮点击。
阅读全文