如何设置默认选中复选框ReactJS？答案

【问题标题】：How to set default Checked in checkbox ReactJS?如何设置默认选中复选框ReactJS？
【发布时间】：2015-11-17 09:43:45
【问题描述】：

在 React 中为复选框分配默认值 checked="checked" 后，我无法更新复选框状态。

var rCheck = React.createElement('input',
    {
        type: 'checkbox',
        checked: 'checked',
        value: true
    }, 'Check here');

分配checked="checked"后，我无法通过单击取消选中/选中来交互复选框状态。

【问题讨论】：

facebook.github.io/react/docs/forms.html 检查受控和非受控组件之间的区别。

标签： reactjs checkbox

【解决方案1】：

要与框交互，您需要在更改复选框后更新复选框的状态。要进行默认设置，您可以使用defaultChecked。

一个例子：

<input type="checkbox" defaultChecked={this.state.chkbox} onChange={this.handleChangeChk} />

【讨论】：

但我没有将 INPUT 创建为类，它是由 React.createElement 创建的。那么，如何设置默认值
@YarinNim 您可以将render 与上述<input> 元素一起使用。 defaultChecked 可以作为 checked 之类的参数提供。
这真的很奇怪。我只是在修复一个默认情况下不检查checkbox 的错误，因为有人使用defaultChecked 而不仅仅是checked。我将其更改为checked，问题已解决。可能自 2015 年以来发生了一些变化——或者 Formik 搞砸了 defaultChecked。

【解决方案2】：

有几种方法可以做到这一点，这里有一些：

使用状态挂钩编写：

function Checkbox() {
  const [checked, setChecked] = React.useState(true);

  return (
    <label>
      <input type="checkbox"
        defaultChecked={checked}
        onChange={() => setChecked(!checked)}
      />
      Check Me!
    </label>
  );
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

这是JSBin 上的现场演示。

使用组件编写：

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isChecked: true,
    };
  }
  toggleChange = () => {
    this.setState({
      isChecked: !this.state.isChecked,
    });
  }
  render() {
    return (
      <label>
        <input type="checkbox"
          defaultChecked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
      </label>
    );
  }
}

ReactDOM.render(
  <Checkbox />,
  document.getElementById('checkbox'),
);

这是JSBin 上的现场演示。

【讨论】：

状态满！无状态方法怎么样？
这个不行了，抛出未处理的输入错误
经过测试，它在我这边运行良好。你有任何其他信息@user6329530？
这可行，但 defaultChecked 更好。
我建议你像这样 onChange={() => setChecked(prevState => !prevState)}

【解决方案3】：

如果仅使用 React.createElement 创建复选框，则属性使用defaultChecked。

React.createElement('input',{type: 'checkbox', defaultChecked: false});

归功于@nash_ag

【讨论】：

这是不对的，你也可以将 defaultChecked 与普通的 html 标签一起使用，与 (class=> className) 和 (for => htmlFor) 等...
@FareedAlnamrouti 这些陈述并不相互排斥。 Yarin 说如果使用 React.createElement 则需要 defaultChecked，而不是专门用于此目的。
谢谢，我想我理解错了

【解决方案4】：

在 React 渲染生命周期中，表单元素的 value 属性将覆盖 DOM 中的值。使用不受控制的组件，你经常希望 React 指定初始值，但离开随后的更新不受控制。要处理这种情况，您可以指定一个 defaultValue 或 defaultChecked 属性，而不是 value。

        <input
          type="checkbox"
          defaultChecked={true}
        />

或者

React.createElement('input',{type: 'checkbox', defaultChecked: true});

请在下面的复选框中查看有关defaultChecked 的更多详细信息： https://reactjs.org/docs/uncontrolled-components.html#default-values

【讨论】：

如果你直接使用checked参数你不能取消它。必须使用此 defaultChecked 参数。谢谢。

【解决方案5】：

除了正确答案之外，您还可以这样做：P

<input name="remember" type="checkbox" defaultChecked/>

【讨论】：

应该是公认的答案，因为这是大多数人会寻找的：原生 HTML checked 的替代品。

【解决方案6】：

您可以将“true”或“”传递给输入复选框的选中属性。空引号 ("") 将被理解为 false 并且该项目将被取消选中。

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>

【讨论】：

checked 已弃用
@Mbanda 您能否提供文档以提供有关此方面的更多信息
你不应该这样做。如果您将字符串传递给“checked”属性，您将收到警告：“警告：收到布尔属性checked 的字符串true。虽然这有效，但如果您通过，它将无法按预期工作字符串“false”。您的意思是checked={true}？”
这其实是正确答案！！！谢谢你。就在我的那个我使用变量===值？真：假；

【解决方案7】：

它的工作原理

<input type="checkbox" value={props.key} defaultChecked={props.checked} ref={props.key} onChange={this.checkboxHandler} />

然后函数初始化

{this.viewCheckbox({ key: 'yourKey', text: 'yourText', checked: this.state.yourKey })}

【讨论】：

【解决方案8】：

值将是真或假defaultChecked={true}

<input type="checkbox"
        defaultChecked={true}
        onChange={() => setChecked(!checked)}
      />

【讨论】：

【解决方案9】：

import React, { useState } from 'react'


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


<input
   type="checkbox"
   checked={rememberUser}
   onChange={() => {
      setRememberUser(!rememberUser)
   }}
/>

【讨论】：

checked 将呈现只读复选框
不行，试试看。
我已经检查过了。如果您在 react js 中使用 checked 属性，它将呈现一个只读复选框。如果您使用checked 属性，则无法选中或取消选中。最好使用 defaultChecked。
@RahulMore 如果你使用 checked 属性没有 onChange 它将呈现一个只读字段。

【解决方案10】：

我尝试使用 Class 组件来完成此操作：您可以查看相同的消息

.....

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

}

【讨论】：

【解决方案11】：

这是我前段时间做的一个代码，它可能有用。你必须玩这条线 => this.state = { checked: false, checked2: true};

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

CSS

.hidden-check1 {
  display: none;  
  }

.hidden-check2 {
  visibility: hidden;
}

HTML

  <div id="container">
      <!-- This element's contents will be replaced with your component. -->
  </div>

这是代码笔 => http://codepen.io/parlop/pen/EKmaWM

【讨论】：

又一个...这是全状态方法！无国籍呢？
绿，你什么意思？

【解决方案12】：

就我而言，我觉得“defaultChecked”在状态/条件下无法正常工作。所以我用“checked”和“onChange”来切换状态。

例如。

checked={this.state.enabled} onChange={this.setState({enabled : !this.state.enabled})}

【讨论】：

【解决方案13】：

如果有人想处理多行的动态数据，这是处理动态数据。

你可以检查rowId是否等于0。

如果等于0，则可以设置布尔值的状态为真。

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

【讨论】：

【解决方案14】：

别太难了。首先，了解下面给出的一个简单示例。你会很清楚。在这种情况下，在按下复选框后，我们将从状态中获取值（最初为 false），将其更改为其他值（最初为 true）并相应地设置状态。如果第二次按下该复选框，它将再次执行相同的过程。获取值（现在为真），将其更改（为假）然后相应地设置状态（现在再次为假。代码在下面共享。

第 1 部分

state = {
  verified: false
} // The verified state is now false

第 2 部分

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

第三部分

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

【讨论】：

【解决方案15】：

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

【讨论】：

一些随附的文本将有助于理解您的代码 sn-p 的用途以及它与 ReactJS 问题的关系。

【解决方案16】：

您可以使用状态变量“enableSwitch”和函数“handleSwitch”来处理默认选中的 Switch：

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

这是在用户点击开关时反转变量的函数：

handleSwitch = (e) => {
   this.setState({ enableSwitch: !this.state.enableSwitch });
}

我知道这是对旧问题的较晚回复，但这个简短的解决方案可能会对其他用户有所帮助。

【讨论】：

【解决方案17】：

 <div className="form-group">
          <div className="checkbox">
            <label><input type="checkbox" value="" onChange={this.handleInputChange.bind(this)}  />Flagged</label>
            <br />
            <label><input type="checkbox" value=""  />Un Flagged</label>
          </div>
        </div

handleInputChange(事件){
console.log("event",event.target.checked)   }

上面的句柄在选中或取消选中时为您提供 true 或 false 的值

【讨论】：

【解决方案18】：

我将状态设置为 any[] 类型。并在构造函数中将状态设置为 null。

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

在输入元素中

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

一段时间后我想通了。认为它可能对你们都有帮助:)

【讨论】：