從createClass轉換爲class關鍵字時，如何正確綁定React組件類的事件處理程序？

我正在準備升級到React 16的React組件，其中關鍵是要更新與React.createClass一起使用class關鍵字的組件。從createClass轉換爲class關鍵字時，如何正確綁定React組件類的事件處理程序？

當我遇到Can only update a mounted or mounting component錯誤時，遇到引發類方法的事件處理程序時，我遇到了麻煩。使用React.createClass

一個簡單的例子...

原來的分量：

const Foo = React.createClass({ 
    getInitialState() { 
    return { bar: false }; 
    }, 

    onClick() { 
    this.setState({ bar: !this.state.bar }); 
    }, 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    }, 
});

按預期工作。那麼，這是否，如果我願意忽略一個新的函數對象將與每次調用創建render：

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={() => { this.setState({ bar: !this.state.bar }); }}>CLICK IT</button> 
     </div> 
    ); 
    } 
}

但是，我不能得到的「在構造函數中結合」的工作方式：

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 

    this.onClick = this.onClick.bind(this); 
    } 

    onClick() { 
    this.setState({ bar: !this.state.bar }); 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    } 
}

我也不能獲得屬性初始化語法的工作方式：

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { bar: false }; 
    } 

    onClick =() => { 
    this.setState({ bar: !this.state.bar }); 
    } 

    render() { 
    return (
     <div> 
     <p>{this.state.bar ? 'YAY' : 'BOO'}</p> 
     <button onClick={this.onClick}>CLICK IT</button> 
     </div> 
    ); 
    } 
}

在這兩種這些情況下，每當我按一下按鈕前面提到的錯誤消息顯示了我瀏覽器控制檯。

我希望有人自己已經遇到過這個問題，並且就如何處理它提出了建議。我想，這完全忽略了一些微不足道的東西。 :)

在此先感謝！

來源

2017-06-05 natlee75

你可以嘗試'的onClick（）{ this.setState（（prevState）=>（{吧！prevState.bar}））; }' –

這是一個單獨的問題;任何綁定方法都能正常工作 –

要使類屬性有效，您需要對其進行轉換。它們現在不包含在Babel預設中，因爲它們仍然是一個建議。你需要啓用[stage-2]（https://babeljs.io/docs/plugins/preset-stage-2/）。 –

查看React文檔：他們有相同的例子。順便說一句你的綁定例子適用於我：發佈你的錯誤信息。

class Toggle extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {isToggleOn: true}; 

    // This binding is necessary to make `this` work in the callback 
    this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
    this.setState(prevState => ({ 
     isToggleOn: !prevState.isToggleOn 
    })); 
    } 

    render() { 
     return (
     <button onClick={this.handleClick}> 
      {this.state.isToggleOn ? 'ON' : 'OFF'} 
     </button> 
    ); 
    } 
    } 

    ReactDOM.render(
    <Toggle />, 
    document.getElementById('root') 
);

來源

2017-06-05 19:08:12 MarkM

錯誤信息非常標準：「警告：setState（...）：只能更新掛載或掛載的組件，這通常意味着你在掛載的組件上調用了setState（），這是一個no-op。代碼爲Foo組件。「 – natlee75

我在準系統'create-react-app'應用程序中進行了測試，並驗證它在那裏工作，所以這只是應用程序設置的一個問題。謝謝！ – natlee75

Pshh，做它的簡單方法和使用react-autobind。在構造函數中自動將所有組件函數綁定到this。

超級簡單易用：

import autoBind from 'react-autobind'; 

constructor() { 
    super(); 
    autoBind(this); 
}

來源

2017-06-05 21:25:57

這聽起來像是作弊！ ;）非常認真，我認爲這不會奏效。我試圖查明應用程序存在問題。該語法是正確的，因爲我可以讓這個類在一個準系統'create-react-app'應用程序中工作，所以還有其他的事情正在搞砸React組件如何綁定。 – natlee75

從電子應用到網絡移植一些代碼後有這個確切的問題。

"transform-es2015-classes"是你需要的！

npm install --save-dev babel-plugin-transform-es2015-classes

更多信息@的babel docs

來源

2017-08-20 07:01:20 josh

從createClass轉換爲class關鍵字時，如何正確綁定React組件類的事件處理程序？

回答

相關問題