阵营复选框不发送的onChange

TLDR：使用defaultChecked而不是检查，这里http://jsbin.com/mecimayawe/1/edit?js,output 阵营复选框不发送的onChange

工作jsbin试图安装一个简单的复选框，当它被选中，将划掉其标签文本。出于某种原因，当我使用组件时，handleChange不会被触发。任何人都可以解释我做错了什么？

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> 
    ); 
    } 
});

用法：

React.renderComponent(CrossoutCheckbox({text: "Text Text", complete: false}), mountNode);

解决方案：

使用检查不让潜在价值变动（明显），因此不会调用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> 
    ); 
    } 
});

来源

2014-10-28 jdarling

首先，为什么不添加一个onChange只是 'this.setState（{checked：！this.state.checked}）' 比存储一个值容易得多。然后在检查的attrubute中有一个三元运算符：'checked = {this.state.checked？ 'checked'：null}' – zackify 2014-10-28 18:34:23

这就是它的开始，但它似乎没有更新。所以我开始在这里和那里调试，以调试没有被解雇的东西。理想情况下，完成后会回到最简单的形式:) – jdarling 2014-10-28 18:37:15

假设你的mountNode是一个实际的dom节点，你将不得不使用'this.refs.complete.getDOMNode（）。checked'。看到小提琴http://jsfiddle.net/d10xyqu1/ – trekforever 2014-10-28 18:42:44

为了让您的复选框的选中状态的路径将是：

this.refs.complete.state.checked

另一种方法是，从传递到handleChange方法事件得到它：

event.target.checked

来源

2014-10-28 18:36:22 zbyte

handleChange永远不会被调用，不要紧，如果你点击复选框或标签，handleChange不会被调用:(。 – jdarling 2014-10-28 18:38:14

尝试使用defaultChecked = {this。 state.complete}而不是“checked”在你的输入上 – zbyte 2014-10-28 18:40:11

就是这样......搜索永远在寻找和徘徊，如果其他人也碰到这个问题，将更新问题并提供完整的工作答案 – jdarling 2014-10-28 18:45:18

在材料UI，复选框的状态可被取出作为

this.refs.complete.state.switched

来源

2016-09-28 06:18:29

在这种情况下，您不希望在输入DOM上使用onChange处理程序，您可以使用onClick属性作为替代方法。 defaultChecked，条件可能为v16 IINM留下固定状态。

class CrossOutCheckbox extends Component { 
     constructor(init){ 
      super(init); 
      this.handleChange = this.handleChange.bind(this); 
     } 
     handleChange({target}){ 
      if (target.checked){ 
      target.removeAttribute('checked'); 
      target.parentNode.style.textDecoration = ""; 
      } else { 
      target.setAttribute('checked', true); 
      target.parentNode.style.textDecoration = "line-through"; 
      } 
     } 
     render(){ 
     return (
      <span> 
       <label style={{textDecoration: this.props.complete?"line-through":""}}> 
       <input type="checkbox" 
         onClick={this.handleChange} 
         defaultChecked={this.props.complete} 
        /> 
       </label> 
       {this.props.text} 
      </span> 
     ) 
    } 
}

我希望这可以帮助未来的人。

来源

2018-02-09 06:39:55 akiespenc

阵营复选框不发送的onChange

回答

相关问题