反应复选框不会切换

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')} />