在React中,当子组件中发生onClick事件时,您可以通过以下方式在父组件中触发事件:
class ParentComponent extends React.Component {
handleChildClick = () => {
console.log('子组件点击事件已触发');
};
render() {
return (
<div>
<h1>这是父组件</h1>
<ChildComponent onClick={this.handleChildClick} />
</div>
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<div>
<h2>这是子组件</h2>
<button onClick={this.props.onClick}>点击我通知父组件</button>
</div>
);
}
}
handleChildClick
函数将被调用。这样,您就可以在父组件中处理子组件的onClick事件了。不要忘记在子组件的propTypes
中定义onClick
属性类型为func
,并在defaultProps
中设置默认值:
import PropTypes from 'prop-types';
ChildComponent.propTypes = {
onClick: PropTypes.func,
};
ChildComponent.defaultProps = {
onClick: () => {},
};
领取专属 10元无门槛券
手把手带您无忧上云