ReactJsチェックボックスは最初の使用後に値を変更しません

Question

私はgetリクエストから動的にレンダリングされる様々なフォーム要素を持つ大きなフォームを持っています。他のすべてのタイプのフォーム（テキストや選択など）は正常に機能していますが、チェックボックスは機能しません。

私はそれを一度チェックした後で、（私はそれをオフにしても）、私は何かを逃したり、ここで何か間違っている？

class Input extends Component{ 
    render(){ 
     var form; 
     if (this.props.componentClass=="choice") { 
      // select form 
     } 

     else if (this.props.componentClass=="bool") 
      form =(<Checkbox id={this.props.controlId} onChange={this.props.onChange} 
           defaultChecked={this.props.placeholder} > 
         </Checkbox>); 
     else 
      // text form 
     return (
      <div> 
       <Form inline onSubmit={this.handleSubmit}> 
        <FormGroup controlId={this.props.controlId}> 
         <ControlLabel>{this.props.name}</ControlLabel> 
         {form} 
         <Panel> 
         {this.props.description} 
         </Panel> 
         <FormControl.Feedback /> 
        </FormGroup> 
       </Form> 
       <br/> 
      </div> 
     ); 
    } 
} 

// onChange code (comes from a parent component) 
    onChange(e){ 
     const form = Object.assign({}, this.state.form); 
     form[e.target.id] = e.target.value; 
     this.setState({ form }); 
     console.log('current state: ', this.state); 
    } 

Answer 1

前述のようにonChange関数をバインドする必要がありますが、 "value"ではなく "checked"を使用する必要があります。ここで

このように変更あなたの例です。この例では

https://jsfiddle.net/8d3of0e7/3/

class Input extends React.Component{ 

    constructor(props){ 
    super(props) 
    this.state = {form:{}} 
    } 

    render(){ 
    var form; 
    if (this.props.componentClass=="choice") { 
     // select form 
    }else if (this.props.componentClass=="bool"){ 
     form = (
     <ReactBootstrap.Checkbox 
      id={this.props.controlId} 
      onChange={this.props.onChange.bind(this)} 
      checked={this.state.form[this.props.controlId]} 
      defaultChecked={this.props.placeholder} > 
     </ReactBootstrap.Checkbox>); 
    }else{ 
     // text form 
    } 
    return (
     <div> 
     <ReactBootstrap.Form inline onSubmit={this.handleSubmit}> 
      <ReactBootstrap.FormGroup controlId={this.props.controlId}> 
      <ReactBootstrap.ControlLabel> 
       {this.props.name} 
      </ReactBootstrap.ControlLabel> 
      {form} 
      <ReactBootstrap.Panel> 
       {this.props.description} 
      </ReactBootstrap.Panel> 
      <ReactBootstrap.FormControl.Feedback /> 
      </ReactBootstrap.FormGroup> 
     </ReactBootstrap.Form> 
     <br/> 
     </div> 
    ); 
    } 

    componentDidUpdate(){ 
    console.log('current state: ', this.state); 
    } 

} 

function onChange(e) { 
    const form = Object.assign({}, this.state.form); 
    form[e.target.id] = e.target.checked; 
    this.setState({ form }); 
} 

ReactDOM.render(
    <Input componentClass='bool' controlId='retired' 
    name='Is retired?' onChange={onChange}/>, 
    document.getElementById('root') 
) 

を私たちの状態は次のようになります。状態：{形：{引退：真}}

Answer 2

問題は、あなたが値にそれを結合することなく、チェックボックスのonChangeを与えたということです。

は、ここに私の現在の関連するコードです。そのため、initialCheckedがあなたのために行っている作業であるため、最初のチェックが機能していますが、実際に操作を行うと、チェックされた位置またはチェックされていない位置に再レンダリングしないように反応します。