子组件中有多个按钮怎么使用父组件中不同的方法
你可以通过在子组件中传递不同的属性或方法名来调用父组件中的不同方法。例如,可以在父组件中定义多个方法,然后在子组件中通过props传递方法名来调用不同的方法。假设在父组件中有两个方法handleClick1和handleClick2,那么可以在子组件中定义两个按钮,并将对应的方法名通过props传递给子组件。子组件中可以通过props来获取方法名并调用对应的方法。示例代码如下:
// 父组件
class ParentComponent extends React.Component {
handleClick1() {
console.log('clicked button 1');
}
handleClick2() {
console.log('clicked button 2');
}
render() {
return (
<div>
<ChildComponent onClick={this.handleClick1} buttonText="Button 1" />
<ChildComponent onClick={this.handleClick2} buttonText="Button 2" />
</div>
);
}
}
// 子组件
class ChildComponent extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>{this.props.buttonText}</button>
);
}
}
原文地址: https://www.cveoy.top/t/topic/bkRo 著作权归作者所有。请勿转载和采集!