反應複選框不會切換

Question

當我單擊複選框時，雖然onChange處理程序中的console.log指示狀態更改爲false，但複選標記並不會消失。另一方面，當通過單獨的按鈕改變狀態時，複選標記正確地打開和關閉。

export default class TestComponent extends Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     is_checked: true 
    }; 
    this.updateCheckbox = this.updateCheckbox.bind(this); 
    this.pressButton = this.pressButton.bind(this); 
} 
updateCheckbox(event) { 
    event.preventDefault(); 

    this.setState({is_checked: !this.state.is_checked}); 
    console.log(this.state.is_checked); // This logs 'false' meaning the click did cause the state change 
    console.log(event.target.checked); // However, this logs 'true' because the checkmark is still there 

} 
pressButton(event){ 
    event.preventDefault(); 
    this.setState({is_checked: !this.state.is_checked}); 
} 
render(){ 

    return (
    <input type="checkbox" onChange={this.updateCheckbox} checked={this.state.is_checked} ></input> 
    <button onClick={this.pressButton}>change checkbox state using button</button> 
    ); 
} 
} 

Answer 1

我想我明白髮生了什麼。

您單擊該按鈕，並切換is_checked，該選項用於選中或取消選中該框。但最終會觸發一個onChange的複選框，它也會切換狀態......您實際上編碼了一個無限循環。雖然，由於React批量/刪除setState操作，您的代碼不會鎖定您的頁面。

試試這個：

var React = require("react"); 

var Component = React.createClass({ 
    getInitialState: function() { 
     return { 
      isChecked: true 
     }; 
    }, 

    handleCheckboxChange: function(event) { 
     console.log("checkbox changed!", event); 
     this.setState({isChecked: event.target.checked}); 
    }, 

    toggleIsChecked: function() { 
     console.log("toggling isChecked value!"); 
     this.setState({isChecked: !this.state.isChecked}); 
    }, 

    handleButtonClick: function(event) { 
     console.log("button was pressed!", event); 
     this.toggleIsChecked(); 
    }, 

    render: function() { 
     return (
      <div> 
       <input type="checkbox" onChange={this.handleCheckboxChange} checked={this.state.isChecked} /> 
       <button onClick={this.handleButtonClick}>change checkbox state using this button</button> 
      </div> 
     ); 
    } 
}); 

module.exports = Component; 

注意，您可以更清潔的使用作出反應的valueLink使這個代碼（在這裏閱讀更多：https://facebook.github.io/react/docs/two-way-binding-helpers.html）

Answer 2

改變每做出反應文檔代碼的雙向綁定，以便卡比爾提供了鏈接。

爲了使它工作，我不得不

1. 使用 「React.createClass」，以使用LinkedStateMixin

   import react from 'react/addons' 
   
   var TestComponent = React.createClass({ 
   mixins: [React.addons.LinkedStateMixin], 
   render: function(){ .... 
   

2. 刪除的onChange = 'updateCheckbox'，而不是 「擴展組件」並改用this.linkState。

   <input type="checkbox" checkedLink={this.linkState(this.state.is_checked)} ></input> 
   

Answer 3

這樣做的原因行爲與陣營的實現細節做的 - 更具體的反應如何規格化變化處理。跨瀏覽器的方式。使用無線電和複選框輸入React使用單擊事件來代替更改事件。當您在附加的事件處理程序中應用preventDefault時，會阻止瀏覽器直觀更新收音機/複選框輸入。有兩種可能的解決方法：

• 使用stopPropagation或者
• 將撥動到setTimeout：setTimeout(x => this.setState(x), 0, {is_checked: !this.state.is_checked});

最好不要使用preventDefault可言，除非它是絕對必要的。

看看這個React Github issue欲瞭解更多信息。

Answer 4

記住的setState是異步的，因此：

console.log(event.target.checked); 

不得立即反映更改。我的方式來處理多個複選框字段：

toggleCheckbox(name, event) { 
    let obj = {}; 
    obj[name] = !this.state[name]; 
    this.setState(obj); 
} 

字段：

<input type="checkbox" name="active" value={this.state.active} checked={this.state.active} onChange={this.toggleCheckbox.bind(this, 'active')} /> 

<input type="checkbox" name="qtype" value={this.state.qtype} checked={this.state.qtype} onChange={this.toggleCheckbox.bind(this, 'qtype')} />