ラジオボタンへの置換のための反応チェックボックス入力

Question

虚偽の値にチェックボックスを使用したいと思います。このチェックボックスをオンにすると、状態を '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に設定された値でレンダリングするだけです。どんな助けでも大歓迎です！

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