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