Question

我想根据React JS中的条件选中一个复选框

我在render方法中的代码是-

var checkedIn;
        if (this.state.edituserisactive.toString() == "true") {
            checkedIn = "checked";
        } else {
            checkedIn = "";
        }

我的复选框代码是-

<label htmlFor="fgh"> Is Active ? <input className="" type="checkbox" 
style={{ marginLeft: '10px' }} name="edituserisactive"   {...checkedIn} 
onChange={this.onChange} /> </label>

我正在打印{checkedIn}值，然后显示已选中但不能在复选框输入类型中使用

Answer 1

<label htmlFor="fgh"> Is Active ? <input className="" type="checkbox" 
style={{ marginLeft: '10px' }} name="edituserisactive" checked={this.state.checkedIn} 
onChange={this.onChange} /> </label>

根据您的状态添加检查的职业选手！

Answer 2

将checked设置为this.state.edituserisactive.toString()将始终使它为true，因为Boolean（“ false”）为true。

您可以将变量直接用作输入的checked属性。

const checkedAttr = { checked: this.state.edituserisactive };

<label htmlFor="fgh">
  <input 
    className="classnamehere" 
    type="checkbox" 
    style={{ marginLeft: '10px' }}
    name="edituserisactive" 
    onChange={this.onChange.bind(this)} 
    {...checkedAttr}/>
</label> 

onChange() {
  const currentVal = this.state.edituserisactive;
  this.setState({
    edituserisactive: !currentVal;
  });
}

如何在输入类型复选框内呈现变量

2 个答案: