在内部渲染中反应Js onClick

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

在反应文档中,在组件之间进行通信,他们也在使用该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,而是创建一个新函数(尚未绑定到任何东西)并绑定它.