javascript - React-Bootstrap表单切换按钮

Question

我似乎无法弄清楚为什么我无法将react-bootstrap开关的默认值设置为false(关闭)。似乎该值唯一会更改的时间是我触发 onChange 事件处理程序时。我错过了什么吗？这是我表单中的开关部分:

<Form.Group as={Row} className="mb-3">
  <Col sm={10}>
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Enable GTC"
      defaultChecked="false"
      onChange={(e) => setField('gtc', e.target.checked)}
    />
  </Col>
</Form.Group>

这是我处理表单状态的方式。

  const setField = (field, value) => {
    setForm({
      ...form,
      [field]: value,
    });
  };

我认为 `defaultChecked="false"可以解决问题，但事实并非如此。

谢谢!

Answer 1

第一

const [switchState, setSwitchState] = useState(false);

然后分配:

defaultChecked={switchState}

现在编写更改处理函数

const handleChange=(e)=>{
   setField('gtc', e.target.checked)
   setSwitchState(!switchState)
    
}

最终代码:

<Form.Group as={Row} className="mb-3">
  <Col sm={10}>
    <Form.Check
      type="switch"
      id="custom-switch"
      label="Enable GTC"
      defaultChecked={switchState}
      onChange={handleChange}
    />
  </Col>
</Form.Group>