Question

我在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内）。渲染方法应该是纯粹的道具和国家的功能

我尝试将bind与click事件一起使用，

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会以高性能的方式为您自动执行此操作，因此你可以安全地删除这个电话。见InspirationFilter

在反应文档Communicate Between Components中，他们也使用bind方法。

有任何修复建议吗？

Answer 1

问题是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，而是创建一个新函数（它还没有绑定到任何东西））并绑定那个。

Answer 2

总结一下，在您的第一个示例中，当您使用此格式时：

onClick={this.functionName(arg1, arg2)

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

使用格式时：

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

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

Answer 3

是的，您需要将功能传递给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

在内部渲染中反应Js onClick

3 个答案: