在渲染内react Js onClick

IT技术 javascript reactjs
2021-05-10 17:14:55

我ul li在render方法中有一个列表，并且有一个onClick事件li，调用this.handleClick函数和状态被更改

var InspirationFilter = React.createClass({
    getInitialState: function() {
        return {currentFilterText:"Top All Time", currentFilter:"top_all_time", showUl:false};
    },
    handleClick: function(filter, filterText){
        this.setState({currentFilterText:filterText, currentFilter:filter, showUl:!this.state.showUl});
    },
    render: function() {
        return (
            <ul>
                <li onClick={this.handleClick('top_all_time', 'Top All Time')}>Top All Time</li>
                  <li onClick={this.handleClick('top_this_week', 'Top This Week')}>Top Week</li>
                <li onClick={this.handleClick('top_this_month', 'Top This Month')}>Top Month</li>
            </ul>
        );
    }
});

但是这段代码给了我错误

警告：setState(...)：无法在现有状态转换期间更新（例如在 内render）。Render 方法应该是 props 和 state 的纯函数

我尝试将绑定与这样的点击事件一起使用， 

return (
    <ul>
        <li onClick={this.handleClick.bind(this,'top_all_time', 'Top All Time')}>Top All Time</li>
        <li onClick={this.handleClick.bind(this,'top_this_week', 'Top This Week')}>Top  Week</li>
        <li onClick={this.handleClick.bind(this.'top_this_month', 'Top This Month')}>Top  Month</li>
    </ul>
);

上面的错误现在消失了，但遇到了另一个错误，如下所示，

警告：bind()：您正在将组件方法绑定到组件。React 会以高性能的方式自动为您执行此操作，因此您可以安全地删除此调用。见灵感过滤器

在 React 文档Communicate between Components 中，他们也使用了该bind方法。

有什么建议可以解决它吗？

3个回答

问题是 onClick 值必须是一个函数，所以只需创建一个辅助方法来为您创建这样的函数：

createClickHandler: function(filter, filterText){
    return function() {
        this.setState({...});
    }.bind(this);
},

render: function() {
    return (
        <ul>
            <li onClick={this.createClickHandler('top_all_time', 'Top All Time')}>Top All Time</li>
            <li onClick={this.createClickHandler('top_this_week', 'Top This Week')}>Top Week</li>
            <li onClick={this.createClickHandler('top_this_month', 'Top This Month')}>Top Month</li>
        </ul>
    );
}

React 的警告在这里真的有点帮助过度。您使用的原因bind()是不绑定this，而是绑定参数。

为什么有效？此解决方案避免了重新绑定警告，因为它不会重新绑定已经绑定的this.handleClick，而是创建一个新函数（尚未绑定到任何东西）并绑定它。

总而言之，在您的第一个示例中，当您使用此格式时：

onClick={this.functionName(arg1, arg2)

您正在调用函数而不是提供对函数的引用。因此，每次渲染时都会直接调用它们，而不是按预期调用 onClick。

使用格式时：

onClick={this.functionName.bind(this, arg1, arg2)}

您正在提供对函数和绑定上下文和参数的引用，而不是调用它。这是正确的方法；忽略警告（即使有太多而且真的很烦人）

是的，您确实需要将函数传递给onClick.

你在第三处打错了 <li>

return (
    <ul>
        <li onClick={this.handleClick.bind(this,'top_all_time', 'Top All Time')}>Top All Time</li>
        <li onClick={this.handleClick.bind(this,'top_this_week', 'Top This Week')}>Top  Week</li>
        <li onClick={this.handleClick.bind(this, 'top_this_month', 'Top This Month')}>Top  Month</li>
    </ul>
);

检查这个小提琴https://jsfiddle.net/69z2wepo/20047/它适用于 React 0.14

其它你可能感兴趣的问题
上一篇react触发器调整大小但实际上不调整屏幕大小 下一篇有条件地react useEffect 钩子加载 onsnapshot