如何设置默认复选框“ ReactJS”?

reactjs React.js

小宇宙GO

2020-03-11

在React中为复选框状态分配默认值check =“ =” checked“后,我无法更新复选框状态。

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

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

第695篇《如何设置默认复选框“ ReactJS”?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
SamEva 2020.03.11

我将状态设置为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)} />

一段时间后,我想通了。以为这可能对大家有帮助:)

乐米亚 2020.03.11
 <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(event){

console.log("event",event.target.checked)   }

上述句柄在选中或未选中时为您提供true或false的值

神无十三 2020.03.11

您可以将“ 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>
逆天西门 2020.03.11

除了正确的答案,您也可以执行:P

<input name="remember" type="checkbox" defaultChecked/>
Mandy小卤蛋凯 2020.03.11

要与复选框互动,您需要在更改复选框后更新其状态。要使用默认设置,可以使用defaultChecked

一个例子:

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android