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>

這是我為表格處理 state 的方式。

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

我認為 `defaultChecked="false" 可以解決問題，但事實並非如此。

謝謝！

Answer 1

刪除defaultChecked="false" 。 通過將其作為道具， defaultChecked設置為 true。

Answer 2

常量 [switchState, setSwitchState] = useState(false);

然后分配：

defaultChecked={switchState}

現在編寫更改處理程序 function

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>