React复选框不发送onChange [英] React Checkbox not sending onChange

问题描述

TLDR：使用defaultChecked而不是已选中，在此处使用jsbin http://jsbin.com/mecimayawe/1/ edit？js，output

尝试设置一个简单的复选框，当它被选中时，将会勾选标签文本。出于某种原因，当我使用组件时handleChange不会被触发。谁能解释我做错了什么？

  var CrossoutCheckbox = React.createClass b $ b getInitialState：function（）{
 return {
 complete：（!! this.props.complete）|| false 
}; 
}，
 handleChange ：function（）{
 console.log（'handleChange'，this.refs.complete.checked）; //永远不会记录
 this.setState（{
 complete：this.refs。 complete.checked 
}）; 
}，
 render：function（）{
 var labelStyle = {
'text-decoration'：this.state.complete？ 'line-through'：''
}; 
 return（
< span> 
< label style = {labelStyle}> 
< input 
 type =checkbox
 checked = {this.state.complete} 
 ref =complete
 onChange = {this.handleChange} 
 /> 
 {this.props.text} 
< / label> 
< / span> 
）; 
} 
}）; 
  

用法：

  React.renderComponent（CrossoutCheckbox（{text：Text Text，complete：false}），mountNode）;解决方案：
 
 
 
使用checked didn'
 t让底层的值改变（显然），因此不调用onChange处理程序。切换到defaultChecked似乎可以解决这个问题：
  var CrossoutCheckbox = React.createClass（{
 getInitialState：function（）{
 return {
 complete：（!! this.props.complete）|| false 
}; 
}，
 handleChange：function （）{
 this.setState（{
 complete：！this.state.complete 
}）; 
}，
 render：function（）{
 var labelStyle = {
'text-decoration'：this.state.complete？'line-through'：''
}; 
 return（
< span> 
< label style = {labelStyle}> 
< input 
 type =checkbox
 defaultChecked = {this.state.complete} 
 ref =complete 
 onChange = {this.handleChange} 
 /> 
 {this.props.text} 
< / label> 
< / span> 
）; 
} 
}）; 
  
 
 
解决方案
 be：
  this.refs.complete.state.checked 
  
另一种方法是从传递到 handleChange 方法的事件中获取它：
  event.target.checked 
  
 
TLDR: Use defaultChecked instead of checked, working jsbin here http://jsbin.com/mecimayawe/1/edit?js,output

Trying to setup a simple checkbox that will cross out its label text when it is checked.  For some reason handleChange is not getting fired when I use the component.  Can anyone explain what I'm doing wrong?
var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    console.log('handleChange', this.refs.complete.checked); // Never gets logged
    this.setState({
      complete: this.refs.complete.checked
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            checked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});
Usage:
React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);
Solution:

Using checked doesn't let the underlying value change (apparently) and thus doesn't call the onChange handler.  Switching to defaultChecked seems to fix this:
var CrossoutCheckbox = React.createClass({
  getInitialState: function () {
    return {
        complete: (!!this.props.complete) || false
      };
  },
  handleChange: function(){
    this.setState({
      complete: !this.state.complete
    });
  },
  render: function(){
    var labelStyle={
      'text-decoration': this.state.complete?'line-through':''
    };
    return (
      <span>
        <label style={labelStyle}>
          <input
            type="checkbox"
            defaultChecked={this.state.complete}
            ref="complete"
            onChange={this.handleChange}
          />
          {this.props.text}
        </label>
      </span>
    );
  }
});

解决方案
To get the checked state of your checkbox the path would be:
this.refs.complete.state.checked
The alternative is to get it from the event passed into the handleChange method:
event.target.checked


                        
这篇关于React复选框不发送onChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！