在內部渲染中反應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 ，而是創建一個新函數（尚未綁定到任何東西）並綁定它。

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