React onClick 执行元素中的所有onClick

Question

我的组件中有以下代码：

<ul className="nav navbar-nav">
    <li className="active" onClick={this.props.resetInfoAndError(1)}><Link to="/owner.html">Main<span className="sr-only">(current)</span></Link></li>
    <li onClick={this.props.resetInfoAndError(2)}><Link to="/carwash">Second</Link></li>
</ul>

this.props.resetInfoAndError(element)是通过redux容器(mapDispatchToProps)

传递给组件的函数

const mapDispatchToProps = (dispatch) => {
return {
    saveInfo: (info) => {
        dispatch(changeInfo(info))
    },

    resetInfoAndError: (a) => {
        dispatch(changeInfo(a))
    }
}
}

我安装了 redux 记录器并按下一个 li 标签，然后在控制台中看到为什么在两个标签中调用函数（带有 1 和 2 参数）：

为什么会发生以及如何解决？

Answer 1

不要在渲染期间调用 onclick。使用如下的包装函数。

<ul className="nav navbar-nav">
    <li className="active" onClick={() => this.props.resetInfoAndError(1)}><Link to="/owner.html">Main<span className="sr-only">(current)</span></Link></li>
    <li onClick={() => this.props.resetInfoAndError(2)}><Link to="/carwash">Second</Link></li>
</ul>

React onClick 执行元素中的所有onClick

React onClick execute all onClick in the element

reactjs

react-redux