Question

单击第二个单选按钮可更改触发渲染事件的状态。但是，即使state.type已更改，它也会再次将第一个单选按钮呈现为已选中的单选按钮。

var MyComponent = React.createClass({
  getInitialState: function() {
    return {
      type: 1
    };
  },
  render: function() {
    console.log('->> type: ' + this.state.type);//prints the expected value
    return (<div className="my-component">
      <label>type 1</label>
      <input ref="type1Selector" type="radio" name="type" id="type1" 
        onChange={this.changeHandler} checked={this.state.type === 1}/><br/>
      <label>type 2</label>
      <input ref="type2Selector" type="radio" name="type" id="type2" 
        onChange={this.changeHandler} checked={this.state.type === 2}/><br/>
    </div>);
  },
  changeHandler: function(e) {
    e.preventDefault();
    var t = e.currentTarget;
    if(t.id === 'type1') {
      this.setState({type: 1});
    } else {
      this.setState({type: 2});
    }
  }
});
ReactDOM.render(<MyComponent />, document.getElementById('container'));

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="container"></div>
</body>
</html>

有人可以告诉我们如何让它发挥作用以及为什么反应会像这样？

Answer 1

如React docs here所述，复选框和单选按钮可能存在问题。

请注意，为了规范化复选框和无线电输入的更改处理，React使用click事件代替change事件。除非在更改处理程序中调用preventDefault，否则大多数情况下都会按预期运行。 preventDefault会阻止浏览器直观地更新输入，即使选中了切换也是如此。这可以通过删除对preventDefault的调用，或者在setTimeout中设置check的切换来解决。

因此，您要删除e.preventDefault()功能中的changeHandler。

reactjs radio group设置基于状态检查属性

1 个答案: