blocks|key|4474176|text|如果复选框仅使用React.createElement创建，则使用属性defaultChecked。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4474177|React.createElement('input',{type:+'checkbox',+defaultChecked:+false});|code-block|syntax|javascript|4474178|归功于@nash_ag|4474179|entityMap^0|8|J|Z|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>If the checkbox is created only with <code>React.createElement</code> then the property 
<code>defaultChecked</code> is used.</p>

<pre><code>React.createElement('input',{type: 'checkbox', defaultChecked: false});
</code></pre>

<p>Credit to @nash_ag</p>


blocks|key|4474103|text|要与该框交互，您需要在更改复选框后更新它的状态。要使用默认设置，您可以使用defaultChecked。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4474104|举个例子：|4474105|<input+type="checkbox"+defaultChecked={this.state.chkbox}+onChange={this.handleChangeChk}+/>|code-block|syntax|javascript|4474106|entityMap^0|11|E|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>To interact with the box you need to update the state for the checkbox once you change it. And to have a default setting you can use <code>defaultChecked</code>.</p>

<p>An example:</p>

<pre><code>&lt;input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} /&gt;
</code></pre>


blocks|key|4473729|text|除了正确的答案外，你还可以这样做:P|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4473730|<input+name="remember"+type="checkbox"+defaultChecked/>|code-block|syntax|javascript|4473731|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>in addition to the correct answer you can just do :P</p>

<pre><code>&lt;input name="remember" type="checkbox" defaultChecked/&gt;
</code></pre>


blocks|key|4473763|text|它起作用了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4473764|<input+type="checkbox"+value={props.key}+defaultChecked={props.checked}+ref={props.key}+onChange={this.checkboxHandler}+/>|code-block|syntax|javascript|4473765|和函数初始化它|4473766|{this.viewCheckbox({+key:+'yourKey',+text:+'yourText',+checked:+this.state.yourKey+})}|4473767|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>It`s working</p>

<pre><code>&lt;input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} /&gt;
</code></pre>

<p>And function init it</p>

<pre><code>{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}
</code></pre>


blocks|key|4473846|text|您可以将"true“或"”传递给input复选框的checked属性。空引号("")将被理解为假，并且该项将被取消选中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4473847|let+checked+=+variable+===+value+?+"true"+:+"";
<input
+++++className="form-check-input"
++++type="checkbox"
++++value={variable}
++++id={variable}
++++name={variable}
++++checked={checked}
/>
<label+className="form-check-label">{variable}</label>|code-block|syntax|javascript|4473848|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You may pass "true" or "" to the checked property of input checkbox. The empty quotes ("") will be understood as false and the item will be unchecked.</p>

<pre><code>let checked = variable === value ? "true" : "";
&lt;input
     className="form-check-input"
    type="checkbox"
    value={variable}
    id={variable}
    name={variable}
    checked={checked}
/&gt;
&lt;label className="form-check-label"&gt;{variable}&lt;/label&gt;
</code></pre>


blocks|key|4474216|text|值为true或false+defaultChecked={true}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4474217|<input+type="checkbox"
++++++++defaultChecked={true}
++++++++onChange={()+=>+setChecked(!checked)}
++++++/>|code-block|syntax|javascript|4474218|entityMap^0|D|L|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Value would be whether true or false <code>defaultChecked={true}</code></p>
<pre><code>&lt;input type=&quot;checkbox&quot;
        defaultChecked={true}
        onChange={() =&gt; setChecked(!checked)}
      /&gt;
</code></pre>


blocks|key|4474229|text|import+React,+{+useState+}+from+'react'


const+[rememberUser,+setRememberUser]+=+useState(true)+//use+false+for+unchecked+initially


<input
+++type="checkbox"
+++checked={rememberUser}
+++onChange={()+=>+{
++++++setRememberUser(!rememberUser)
+++}}
/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4474230|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>import React, { useState } from 'react'


const [rememberUser, setRememberUser] = useState(true) //use false for unchecked initially


&lt;input
   type=&quot;checkbox&quot;
   checked={rememberUser}
   onChange={() =&gt; {
      setRememberUser(!rememberUser)
   }}
/&gt;

</code></pre>


blocks|key|4474020|text|我尝试使用类组件来完成此任务:您可以查看相同的消息|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474021|.|4474022|class+Checkbox+extends+React.Component{
constructor(props){
++++super(props)
++++this.state={
++++++++checked:true
++++}
++++this.handleCheck=this.handleCheck.bind(this)
}

handleCheck(){
++++this.setState({
++++++++checked:!this.state.checked
++++})
}

render(){
++++var+msg="+"
++++if(this.state.checked){
++++++++msg="checked!"
++++}else{
++++++++msg="not+checked!"
++++}
++++return(
++++++++<div>
++++++++++++<input+type="checkbox"+
++++++++++++onChange={this.handleCheck}
++++++++++++defaultChecked={this.state.checked}
++++++++++++/>
++++++++++++<p>this+box+is+{msg}</p>
++++++++</div>
++++)
}|code-block|syntax|javascript|4474023|}|4474024|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I tried to accomplish this using Class component:
you can view the message for the same</p>
<p>.....</p>
<pre><code>class Checkbox extends React.Component{
constructor(props){
    super(props)
    this.state={
        checked:true
    }
    this.handleCheck=this.handleCheck.bind(this)
}

handleCheck(){
    this.setState({
        checked:!this.state.checked
    })
}

render(){
    var msg=&quot; &quot;
    if(this.state.checked){
        msg=&quot;checked!&quot;
    }else{
        msg=&quot;not checked!&quot;
    }
    return(
        &lt;div&gt;
            &lt;input type=&quot;checkbox&quot; 
            onChange={this.handleCheck}
            defaultChecked={this.state.checked}
            /&gt;
            &lt;p&gt;this box is {msg}&lt;/p&gt;
        &lt;/div&gt;
    )
}
</code></pre>
<p>}</p>


blocks|key|4473970|text|在我的例子中，我觉得"defaultChecked“在状态/条件下不能正常工作。所以我使用了"checked“和"onChange”来切换状态。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4473971|例如：|4473972|checked={this.state.enabled}+onChange={this.setState({enabled+:+!this.state.enabled})}|code-block|syntax|javascript|4473973|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In my case I felt that "defaultChecked" was not working properly with states/conditions. So I used "checked" with "onChange" for toggling the state.</p>

<p>Eg. </p>

<pre><code>checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}
</code></pre>


blocks|key|4474064|text|如果有人想要处理多行的动态数据，这是用于处理动态数据的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474065|您可以检查rowId是否等于0。|4474066|如果它等于0，则可以将布尔值的状态设置为true。|4474067|interface+MyCellRendererState+{
++++value:+boolean;
}
constructor(props)+{
++++++++super(props);
++++++++this.state+=+{
++++++++++++value:+props.value+?+props.value+:+false
++++++++};
++++++++this.handleCheckboxChange+=+this.handleCheckboxChange.bind(this);
++++}
handleCheckboxChange()+{
++++++++this.setState({+value:+!this.state.value+});
++++};
render()+{
++++++++const+{+value+}+=+this.state;
++++++++const+rowId+=+this.props.rowIndex
++++++++if+(rowId+===+0)+{
+++++++++++this.state+=+{
+++++++++++++value+:+true+}
++++++++}
++++++++return+(+
++++++++++<div+onChange={this.handleCheckboxChange}>
++++++++++++<input+
++++++++++++type="radio"+
++++++++++++checked={this.state.value}
++++++++++++name="print"
++++++++++++/>+
++++++++++</div>
+++++++++)
++++++}|code-block|syntax|javascript|4474068|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>If someone wants to handle dynamic data with multiple rows, this is for     handing dynamic data.</p>
<p>You can check if the rowId is equal to 0.</p>
<p>If it is equal to 0, then you can set the state of the boolean value as true.</p>
<pre><code>interface MyCellRendererState {
    value: boolean;
}
constructor(props) {
        super(props);
        this.state = {
            value: props.value ? props.value : false
        };
        this.handleCheckboxChange = this.handleCheckboxChange.bind(this);
    }
handleCheckboxChange() {
        this.setState({ value: !this.state.value });
    };
render() {
        const { value } = this.state;
        const rowId = this.props.rowIndex
        if (rowId === 0) {
           this.state = {
             value : true }
        }
        return ( 
          &lt;div onChange={this.handleCheckboxChange}&gt;
            &lt;input 
            type=&quot;radio&quot; 
            checked={this.state.value}
            name=&quot;print&quot;
            /&gt; 
          &lt;/div&gt;
         )
      }
</code></pre>


blocks|key|4474214|text|这是我一段时间前做的代码，它可能会有用。您必须使用此行=>+this.state+={+checked:+false，checked2:+true}；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474215|class+Componente+extends+React.Component+{
++constructor(props)+{
++++super(props);

++++this.state+=+{+checked:+false,+checked2:+true};
++++this.handleChange+=+this.handleChange.bind(this);
++++this.handleChange2+=+this.handleChange2.bind(this);

++}++

++handleChange()+{
++++this.setState({
++++++++checked:+!this.state.checked++++++
++++})
++}

++handleChange2()+{
++++this.setState({
++++++++checked2:+!this.state.checked2++++++
++++})
++}

++render()+{
++++const+togglecheck1+=+this.state.checked+?+'hidden-check1'+:+'';
++++const+togglecheck2+=+this.state.checked2+?+'hidden-check2'+:+'';

++++return+<div>
++++++++<div>
++++++++<label>Check+1</label>
++++++++<input+type="checkbox"+id="chk1"className="chk11"+checked={+this.state.checked+}+onChange={+this.handleChange+}+/>
++++++++<label>Check+2</label>
++++++++<input+type="checkbox"+id="chk2"+className="chk22"+checked={+this.state.checked2+}+onChange={+this.handleChange2+}+/>
++++++</div>

++++++<div+className={+togglecheck1+}>show+hide+div+with+check+1</div>
++++++<div+className={+togglecheck2+}>show+hide+div+with+check+2</div>

++++</div>;
++}
}

ReactDOM.render(
++<Componente+/>,
++document.getElementById('container')
);|code-block|syntax|javascript|4474216|CSS|4474217|.hidden-check1+{
++display:+none;++
++}

.hidden-check2+{
++visibility:+hidden;
}|4474218|HTML|4474219|++<div+id="container">
++++++
++</div>|4474220|下面是codepen+=>+http://codepen.io/parlop/pen/EKmaWM|offset|length|4474221|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/parlop/pen/EKmaWM^0|0|0|0|0|0|0|E|Z|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>Here's a code I did some time ago,  it might be useful.
you have to play with this line => this.state = { checked: false, checked2: true};</p>

<pre><code>class Componente extends React.Component {
  constructor(props) {
    super(props);

    this.state = { checked: false, checked2: true};
    this.handleChange = this.handleChange.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);

  }  

  handleChange() {
    this.setState({
        checked: !this.state.checked      
    })
  }

  handleChange2() {
    this.setState({
        checked2: !this.state.checked2      
    })
  }

  render() {
    const togglecheck1 = this.state.checked ? 'hidden-check1' : '';
    const togglecheck2 = this.state.checked2 ? 'hidden-check2' : '';

    return &lt;div&gt;
        &lt;div&gt;
        &lt;label&gt;Check 1&lt;/label&gt;
        &lt;input type="checkbox" id="chk1"className="chk11" checked={ this.state.checked } onChange={ this.handleChange } /&gt;
        &lt;label&gt;Check 2&lt;/label&gt;
        &lt;input type="checkbox" id="chk2" className="chk22" checked={ this.state.checked2 } onChange={ this.handleChange2 } /&gt;
      &lt;/div&gt;

      &lt;div className={ togglecheck1 }&gt;show hide div with check 1&lt;/div&gt;
      &lt;div className={ togglecheck2 }&gt;show hide div with check 2&lt;/div&gt;

    &lt;/div&gt;;
  }
}

ReactDOM.render(
  &lt;Componente /&gt;,
  document.getElementById('container')
);
</code></pre>

<p>CSS</p>

<pre><code>.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}
</code></pre>

<p>HTML</p>

<pre><code>  &lt;div id="container"&gt;
      &lt;!-- This element's contents will be replaced with your component. --&gt;
  &lt;/div&gt;
</code></pre>

<p>here's the codepen => <a href="http://codepen.io/parlop/pen/EKmaWM" rel="nofollow">http://codepen.io/parlop/pen/EKmaWM</a></p>


blocks|key|4474449|text|别把它搞得太难了。首先，理解下面给出的一个简单示例。你就会明白了。在本例中，在按下复选框后，我们将从状态中获取值(最初为false)，将其更改为其他值(最初为true)，并相应地设置状态。如果第二次按下复选框，它将再次执行相同的过程。抓取值(现在为true)，将其更改(为false)，然后相应地设置状态(现在再次为false。代码在下面分享。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474450|第1部分|4474451|state+=+{
++verified:+false
}+//+The+verified+state+is+now+false|code-block|syntax|javascript|4474452|第2部分|4474453|verifiedChange+=+e+=>+{
++//+e.preventDefault();+It's+not+needed
++const+{+verified+}+=+e.target;
++this.setState({
++++verified:+!this.state.verified+//+It+will+make+the+default+state+value(false)+at+Part+1+to+true+
++});
};+|4474454|第三部分|4474455|++<form>+
++++++<input
++++++++++type="checkbox"
++++++++++name="verified"
++++++++++id="verified"
++++++++++onChange={this.verifiedChange}+//+Triggers+the+function+in+the+Part+2
++++++++++value={this.state.verified}
++++++/>
++++++<label+for="verified">
++++++<small>Verified</small>
++++++</label>
++</form>|4474456|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Don't make it too hard. First, understand a simple example given below. It will be clear to you. In this case, just after pressing the checkbox, we will grab the value from the state(initially it's false), change it to other value(initially it's true) &amp; set the state accordingly. If the checkbox is pressed for the second time, it will do the same process again. Grabbing the value (now it's true), change it(to false) &amp; then set the state accordingly(now it's false again. The code is shared below. </p>

<p>Part 1</p>

<pre><code>state = {
  verified: false
} // The verified state is now false
</code></pre>

<p>Part 2</p>

<pre><code>verifiedChange = e =&gt; {
  // e.preventDefault(); It's not needed
  const { verified } = e.target;
  this.setState({
    verified: !this.state.verified // It will make the default state value(false) at Part 1 to true 
  });
}; 
</code></pre>

<p>Part 3 </p>

<pre><code>  &lt;form&gt; 
      &lt;input
          type="checkbox"
          name="verified"
          id="verified"
          onChange={this.verifiedChange} // Triggers the function in the Part 2
          value={this.state.verified}
      /&gt;
      &lt;label for="verified"&gt;
      &lt;small&gt;Verified&lt;/small&gt;
      &lt;/label&gt;
  &lt;/form&gt;
</code></pre>


blocks|key|4474086|text|<div+className="display__lbl_input">
++++++++++++++<input
++++++++++++++++type="checkbox"
++++++++++++++++onChange={this.handleChangeFilGasoil}
++++++++++++++++value="Filter+Gasoil"
++++++++++++++++name="Filter+Gasoil"
++++++++++++++++id=""
++++++++++++++/>
++++++++++++++<label+htmlFor="">Filter+Gasoil</label>
++++++++++++</div>

handleChangeFilGasoil+=+(e)+=>+{
++++if(e.target.checked){
++++++++this.setState({
++++++++++++checkedBoxFG:e.target.value
++++++++})
++++++++console.log(this.state.checkedBoxFG)
++++}
++++else{
+++++this.setState({
++++++++checkedBoxFG+:+''
+++++})
+++++console.log(this.state.checkedBoxFG)
++++}
++};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4474087|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div className=&quot;display__lbl_input&quot;&gt;
              &lt;input
                type=&quot;checkbox&quot;
                onChange={this.handleChangeFilGasoil}
                value=&quot;Filter Gasoil&quot;
                name=&quot;Filter Gasoil&quot;
                id=&quot;&quot;
              /&gt;
              &lt;label htmlFor=&quot;&quot;&gt;Filter Gasoil&lt;/label&gt;
            &lt;/div&gt;

handleChangeFilGasoil = (e) =&gt; {
    if(e.target.checked){
        this.setState({
            checkedBoxFG:e.target.value
        })
        console.log(this.state.checkedBoxFG)
    }
    else{
     this.setState({
        checkedBoxFG : ''
     })
     console.log(this.state.checkedBoxFG)
    }
  };
</code></pre>


blocks|key|4474710|text|您可以使用状态变量"enableSwitch“和函数"handleSwitch”来处理默认的选中开关：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474711|<div+class="custom-control+custom-switch">
++++<input+type="checkbox"+class="custom-control-input"+id="switchId"+checked={this.state.enableSwitch}+onClick={this.handleSwitch}/>
++++<label+class="custom-control-label"+for="switchId">switch+text</label>
</div>|code-block|syntax|javascript|4474712|下面是当用户点击开关时反转变量的函数：|4474713|handleSwitch+=+(e)+=>+{
+++this.setState({+enableSwitch:+!this.state.enableSwitch+});
}|4474714|我知道这是对一个老问题的迟来的回复，但这个简短的解决方案可能会对其他用户有所帮助。|4474715|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You can use a state var &quot;enableSwitch&quot; and a function &quot;handleSwitch&quot; to handle your default checked Switch:</p>
<pre><code>&lt;div class=&quot;custom-control custom-switch&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;custom-control-input&quot; id=&quot;switchId&quot; checked={this.state.enableSwitch} onClick={this.handleSwitch}/&gt;
    &lt;label class=&quot;custom-control-label&quot; for=&quot;switchId&quot;&gt;switch text&lt;/label&gt;
&lt;/div&gt;
</code></pre>
<p>Here's the function which inverts the variable if the user clicks on the switch:</p>
<pre><code>handleSwitch = (e) =&gt; {
   this.setState({ enableSwitch: !this.state.enableSwitch });
}
</code></pre>
<p>I know it's a late reply to an old question, but this short solution may help other users.</p>


blocks|key|4474327|text|我将状态设置为any[]类型。并在构造函数中将状态设置为null。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474328|onServiceChange+=+(e)+=>+{
++++const+{value}+=+e.target;
++++const+index+=+this.state.services.indexOf(value);
++++const+services+=+this.state.services.filter(item+=>+item+!==+value);
++++this.setState(prevState+=>+({
++++++++services:+index+===+-1+?+prevState.services.push(value)+&&+prevState.services+:+this.state.services.filter(item+=>+item+!==+value)
++++}))
}|code-block|syntax|javascript|4474329|在input元素中|4474330|this.onServiceChange(e)}/>+this.onServiceChange(e)}/>|4474331|过了一段时间，我想通了。我想这可能会对你们有所帮助:)|4474332|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I set the state as any[] type. and in the constructor set the state to null.</p>

<pre><code>onServiceChange = (e) =&gt; {
    const {value} = e.target;
    const index = this.state.services.indexOf(value);
    const services = this.state.services.filter(item =&gt; item !== value);
    this.setState(prevState =&gt; ({
        services: index === -1 ? prevState.services.push(value) &amp;&amp; prevState.services : this.state.services.filter(item =&gt; item !== value)
    }))
}
</code></pre>

<p>In the input element</p>

<p> this.onServiceChange(e)}/>
 this.onServiceChange(e)}/>
 this.onServiceChange(e)}/>
 this.onServiceChange(e)}/></p>

<p>I figured it out after some time. Thought it might help y'all :)</p>


<p>I'm having trouble to update the checkbox state after it's assigned with default value <code>checked=&quot;checked&quot;</code> in React.</p>
<pre><code>var rCheck = React.createElement('input',
    {
        type: 'checkbox',
        checked: 'checked',
        value: true
    }, 'Check here');
</code></pre>
<p>After assigning <code>checked=&quot;checked&quot;</code>, I cannot interact the checkbox state by clicking to uncheck/check.</p>


How to set default Checked in checkbox ReactJS?

在React中将checkbox状态指定为默认值checked="checked"后，我在更新checkbox状态时遇到了问题。var rCheck = React.createElement('input',    {        type: 'checkbox',        checked: 'checked',        value: true    }, 'Check here'

问如何在checkbox ReactJS中设置默认选中？
EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在checkbox ReactJS中设置默认选中？EN

回答 15

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在checkbox ReactJS中设置默认选中？
EN