React复选框输入替换为单选按钮

Question

我想使用复选框输入true/false值。这个想法是提供一个复选框，当选中时，将状态更改为'1'，未选中时将状态更改为'0'。现在，这里是我的组件状态：

this.state = { 
    attrValue: '' 
}; 

的JSX复选框：

<div className="col-md-4 col-sm-4"> 
        <input 
         type="checkbox" 
         checked={this.state.attrValue === '1'} 
         value={this.state.attrValue} 
         onChange={this._handleInputChange} 
         name="attrValue" 
        /> 
       </div> 

上更改处理：

_handleInputChange(e) { 
    const element = e.target; 
    const stateObject = {}; 

    stateObject[element.name] = element.value; 
    this.setState(stateObject); 
} 

截至目前，点击复选框不修改状态。我不完全确定这是否可能。使用单选按钮，我只需渲染一个值为1和0的true和false单选按钮。非常感谢任何帮助！

Answer 1

你在代码中并不太远。

看看我创建的这个小提琴。请注意，我使初始状态更简单，而不是空字符串，并且我将状态设置为onChange上复选框的值。

http://jsfiddle.net/tp3k4wpL/

class Foo extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     attrValue: false 
    }; 
    this._handleInputChange = this._handleInputChange.bind(this); 
    } 
    _handleInputChange(e) { 
     const element = e.target; 
     this.setState({attrValue: element.checked}); 
    } 
    render() { 
    return (
    <div className="col-md-4 col-sm-4"> 
     <input 
      type="checkbox" 
      checked={this.state.attrValue} 
      onChange={this._handleInputChange} 
      name="attrValue" 
     /> 
     {`State of checkbox: ${this.state.attrValue}`} 
    </div> 
    ); 
    } 
} 
React.render(<Foo />, document.body);