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

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

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

归功于@nash_ag

Answer 3

有几种方法可以实现这一目标，其中之一是：

写于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 4

除了你能做的正确答案外：P

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

Answer 5

它正在工作

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

在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

Answer 7

您可以将“ 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>

Answer 8

我尝试使用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>
    )
}

}

Answer 9

就我而言，我认为“ defaultChecked”在状态/条件下无法正常工作。因此，我将“ checked”和“ onChange”用于切换状态。

例如。

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

Answer 10

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

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

第3部分

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

Answer 11

这是我前一段时间做过的代码，它可能很有用。你必须玩这行=＆gt; 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>

这是codepen =＆gt; http://codepen.io/parlop/pen/EKmaWM

Answer 12

If someone wants to handle dynamic data with multiple rows, this is for 
handing dynamic data. 
You can check if the rowId is equal to 0.
If it is equal to 0, then you can set the state of the boolean value as true.
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>
         )
      }

Answer 13

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

Answer 14

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

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

我知道这是对一个老问题的迟到回复，但这个简短的解决方案可能会帮助其他用户。

Answer 15

这可以用纯js完成

              <Form.Group controlId="categoryStatus">
                <Form.Check
                  type="checkbox"
                  label="Category Status Active/In-active"
                  onChange={this.handleChecked}                 
                />
              </Form.Group>

  //Load category to form : to edit
  GetCategoryById(id) {
    this.UpdateId = id
    axios.get('http://localhost:4000/Category/edit/' + id)
      .then(response => {
        this.setState({
          category_name: response.data.category_name,
          category_description: response.data.category_description,
          is_active: response.data.is_active,
        });

        response.data.is_active == 1 ? document.getElementById("categoryStatus").checked = true : document.getElementById("categoryStatus").checked = false;
      })
      .catch(function (error) {
        console.log(error);
      })
  }

Answer 16

我将状态设置为任何[]类型。并在构造函数中将状态设置为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）} /＆gt; this.onServiceChange（E）} /＆GT; this.onServiceChange（E）} /＆GT; this.onServiceChange（E）} /＆GT;

经过一段时间后，我想出来了。认为这可能对你们有所帮助:)。

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

上面的句柄在check或unChecked

时给你true或false的值

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

17 个答案: