如何将自定义React事件作为组件道具处理

Question

假设我们有一个可重用的按钮组件。我们onClick为handlehandleClick事件提供道具。<Button onClick={(e)=>{doSomething(e)}}/>但是我也想在用户单击时更改按钮的文本属性。为了说明如下：export default class Button extends React.Component{    static propTypes = {       onClick:PropTypes.func    }     constructor(props){    super(props)    this.state = {      text:'Not Clicked the Button'    }     this.handleClick = this.handleClick.bind(this)     }    handleClick = (e) => {        this.setState({text:'Clicked the Button'})        this.props.onClick(e)    };    render(){       const {text} = this.state        return (            <button onClick={this.handleClick}>{text}</button>           )     }}像这样尝试时，将显示以下错误消息：TypeError: onClick is not a function解决该错误的方法应该是什么。处理可重用组件的事件的最佳方法是什么。

Answer 1

我找到了解决方案。如果没有prop func的默认值，则会出现此错误。

因此，一开始它应该包含onClick默认值null。

static defaultProps = {

 onClick:null

}