我有麻烦更新复选框的状态后,它被分配的默认值checked=“checked”在React。

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

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


当前回答

要与复选框交互,您需要在更改复选框后更新复选框的状态。你可以使用defaultChecked来设置默认值。

一个例子:

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

其他回答

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

<input name="remember" type="checkbox" defaultChecked/>
 <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的值

要与复选框交互,您需要在更改复选框后更新复选框的状态。你可以使用defaultChecked来设置默认值。

一个例子:

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

在React呈现生命周期中,表单元素上的value属性 将覆盖DOM中的值。对于一个不受控制的组件, 你通常希望React指定初始值,但留下 后续更新不受控制。要处理这种情况,您可以指定 使用defaultValue或defaultChecked属性代替value。

        <input
          type="checkbox"
          defaultChecked={true}
        />

Or

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

请签出更多关于defaultChecked复选框的详细信息: https://reactjs.org/docs/uncontrolled-components.html#default-values

它的工作

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