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

Question

在React中分配了默认值checked ="checked"后,我无法更新复选框状态.

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

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

Answer 1

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

一个例子:

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

Answer 2

有几种方法可以实现这一点,这里有一个:

写在ES6:

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"
          checked={this.state.isChecked}
          onChange={this.toggleChange}
        />
        Check Me!
       </label>
    );
  }
}

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

这是关于JSBin的现场演示.

或者使用普通的旧JavaScript:

var Checkbox = React.createClass({
  getInitialState: function() {
    return {
      isChecked: true
    };
  },
  toggleChange: function() {
    this.setState({
      isChecked: !this.state.isChecked // flip boolean value
    }, function() {
      console.log(this.state);
    }.bind(this));
  },
  render: function() {
    return (
      <label>
        <input
          type="checkbox"
          checked={this.state.isChecked}
          onChange={this.toggleChange} />
        Check Me!
      </label>
    );
  }
});

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

再次,在JSBin上进行现场演示.

Answer 3

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

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

感谢@nash_ag

Answer 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/uncontrol-components.html#default-values

Answer 5

除了正确答案,你可以这样做:P

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

Answer 6

值是 true 还是 falsedefaultChecked={true}

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

Answer 7

import React, { useState } from 'react'


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


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

Answer 8

它正在工作

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

Answer 9

您可以将“true”或“”传递给输入复选框的checked属性。空引号 ("") 将被理解为 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>