如何将自定义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 = {&nbsp;onClick:null}