将复选框的值传递给 React Js 中的状态 [重复]

Question

我正在尝试将复选框的值传递给已检查的状态，我倾向于使用下面的模型，但它不起作用。复选框的标准值不变，如果有人知道怎么做，可以帮助我，我很感激。

import React, {useState} from 'react';

function Formulario(){
    const[cheked, setCheked] = useState(true)

    return(
        <div>
            <input type="checkbox" id="checked" value={cheked} 
              onChange={e=>{setCheked(e.target.validationMessage)}}  />
            <label htmlFor="checked">cheked</label>
        </div>
    )
}

export default Formulario;

Answer 1

请设置e.target.checked 而不是e.target.validationMessage。请检查以下示例：

import React, {useState} from 'react';

function Formulario() {
    const [checked, setChecked] = useState(true);

    return (
        <div>
            <input type="checkbox" id="checked" value={checked}
                   onChange={e => {
                       setChecked(e.target.checked)
                   }}/>
            <label htmlFor="checked">checked</label>
        </div>
    )
}

export default Formulario;

Answer 2

您需要做的是创建某种切换。如果你只是这样设置状态，你将无法来回切换。

所以在这种情况下我会是这样的

import React, {useState} from 'react';

function Formulario(){
    const[cheked, setCheked] = useState(true)

const handleChange = () => {

setCheckd(!checked)

console.log(checked)

}

    return(
        <div>
            <input type="checkbox" id="checked" checked={cheked} 
              onChange={handleChange}  />
            <label htmlFor="checked">cheked</label>
        </div>
    )
}

export default Formulario;

因此，通过这样做，当发生更改时，状态将设置为不等于检查值的任何值。

希望对你有帮助

Answer 3

正如 lux 指出的，我认为这就是你想要的：

<input type="checkbox" id="checked" checked={cheked} 

使用 checked 属性而不是 value 属性。

Answer 4

您的事件目标验证消息很可能是问题，请实施以下更新

import React, {useState} from 'react';

function Formulario(){
    const[cheked, setCheked] = useState(true)
    const handleInputChange=(event)=> {
    const target = event.target;
    const value = target.checked
    const name = target.name;

    this.setState({
      [name]: value
    });
  }
    return(
     
        <div>
        <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
            <label htmlFor="checked">cheked</label>
        </div>
    )
}

export default Formulario;