如何设置默认的复选框ReactJS?

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

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

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

当前回答

import React, { useState } from 'react'


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


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

2021-10-05 00:06:10

其他回答

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

一个例子:

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

2015-08-24 04:15:41

在我的情况下，我觉得“defaultChecked”不能正常工作的状态/条件。所以我用“checked”和“onChange”来切换状态。

Eg.

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

2020-03-11 12:10:10

取值为true或false defaultChecked={true}

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

2021-09-01 22:39:52

import React, { useState } from 'react'


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


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

2021-10-05 00:06:10

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

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

2016-11-21 07:58:35

如何设置默认的复选框ReactJS?

推荐文章

最新文章

标签