反应道具功能未定义

Question

我有一个元素有一个 onClick 道具，然后另一个元素调用这个道具，并执行一些其他操作。

代码如下：

仪表板边栏：

class DashboardSidebar extends Component{
constructor(props){
    super(props);

    this.expandOption = this.expandOption.bind(this);
}

expandOption(id){
   ...
}

render(){
    return(
        <div className="DashboardSidebar">
            ...
            <DSidebarOption onClick={this.expandOption("dashboard")} id="dashboard" text="Dashboard" />
            ...
        </div>
    );
}
}

DSidebar选项：

class DSidebarOption extends Component{
constructor(props){
    super(props);

    this.handleClick = this.handleClick.bind(this);
}

handleClick(){
    ...
    this.props.onClick();
    ...
}


render(){
    return(
        <div className="DSidebarOptionContainer">
            ...
            <div onClick={this.handleClick} className="DSidebarOption">
                {this.props.text}
            </div>
            ...
        </div>
    )
}
}

我收到以下错误：

Uncaught TypeError: this.props.onClick is not a function

知道为什么会发生这种情况吗？

Answer 1

你应该像这样传递你的 onclick

onClick={() => {this.expandOption("dashboard")}}

否则在页面加载时调用

反应道具功能未定义

React prop function undefined

javascript

undefined

reactjs

react-props