javascript - react-bootstrap form switch button - Stack Overflow

admin管理员组

文章数量:1392116

I can't seem to figure out why I am not able to set the default value for react-bootstrap switch to false (off). It seems the only time the value will change is when I trigger the onChange event handler. Am I missing something? Here is the switch portion in my form:

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

Here is how I am handling the state for the form.

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

I would think `defaultChecked="false" would do the trick but it does not.

Thanks!

I can't seem to figure out why I am not able to set the default value for react-bootstrap switch to false (off). It seems the only time the value will change is when I trigger the onChange event handler. Am I missing something? Here is the switch portion in my form:

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

Here is how I am handling the state for the form.

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

I would think `defaultChecked="false" would do the trick but it does not.

Thanks!

• javascript
• reactjs
• bootstrap-4
• next.js
• react-bootstrap

Share Improve this question Follow edited Dec 22, 2022 at 20:45 Yilmaz 50.1k1818 gold badges218218 silver badges271271 bronze badges asked Jan 14, 2022 at 22:43 rf guyrf guy 43922 gold badges1111 silver badges2929 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

First

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

then assign the :

defaultChecked={switchState}

Now write the change handler function

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

final code:

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

Remove defaultChecked="false". By having it as a prop, defaultChecked is set to true.

Use defaultChecked={false} instead. The value should be a boolean, rather than a string.

However, the answer posted by @Yilmaz is the full solution.

本文标签： javascriptreactbootstrap form switch buttonStack Overflow