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

Posted 2023-02-21

技术标签:

【中文标题】如何设置默认选中复选框ReactJS？【英文标题】：How to set default Checked in checkbox 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 检查受控和非受控组件之间的区别。 【参考方案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)/>

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

【讨论】：

以上是关于如何设置默认选中复选框ReactJS？的主要内容，如果未能解决你的问题，请参考以下文章

android RadioButton怎么设置默认选中

如何在 MFC 对话框应用程序中将复选框设置为默认选中？

如何在 Kivy 中默认选中复选框？

单选项和复选框默认选中是怎么实现的？

怎么设置多选中el-tree的复选框