Question

假设我们有一个可重用的按钮组件。我们为onClick事件提供了一个handleClick道具。

<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
}

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

1 个答案: