react bootstrap form.switch 没有按预期工作

Question

我用过react-bootstrap Form。我需要使用开关按钮。如果是这样，则必须显示输入框，否则输入框将不会显示。

  const initialState = {
    billingType: "",
    basicFees: false,
    basicFeesCharges: 0
  }
 const [form, setForm] = useState(initialState);
 const [toggle, setToggle] = useState(false);

  useEffect(() => {
    console.log('toggle effect',toggle);
    console.log('use effect form',form);
  }, [toggle,form]);

  const setField = (field, value) => {
    console.log("field", field);
    console.log("value", value);
    setForm({
      ...form,
      [field]: value,
    });
    console.log("set field ", form);
    // Check and see if errors exist, and remove them from the error object:
    if (!!errors[field]) {
      setErrors({
        ...errors,
        [field]: null,
      });
    }
  };

JSX

 <Form.Group>
                          <Form.Check
                            type="switch"
                            name="basicFees"
                            id="custom-switch"
                            label="Basic Fees"
                            checked={toggle}
                            onChange={(e) => {
                              setToggle(!toggle);
                              setField("basicFees",toggle);
                            }}
                          />
                          Here fees {form && form.basicFees ? "on" : "off"}
                          {form && form.basicFees ? (
                            <>
                              <Form.Label>Basic Fees Charges</Form.Label>
                              <Form.Control
                                type="text"
                                name="basicFeesCharges"
                                onChange={(e) =>
                                  setField("basicFeesCharges", e.target.value)
                                }
                                isInvalid={!!errors.basicFeesCharges}
                              />
                              <Form.Control.Feedback type="invalid">
                                {errors.basicFeesCharges}
                              </Form.Control.Feedback>
                            </>
                          ) : (
                            ""
                          )}
                        </Form.Group>

问题： 使用上面的代码，我没有得到正确的结果。默认情况下，开关处于关闭状态。当我第一次点击时，理想情况下它应该显示

basicFeesCharges

的输入框，但它没有显示并且当时开关处于“打开”状态。第二次点击它显示

basicFeesCharges

的输入框并且那个时候开关按钮是'Off'。 意味着即使使用了

useEffect

，状态或表单也不会正确更新 onChange。所以给开关按钮相反的结果。

作为初学者，即使尝试了不同的语法或代码，我也无法找到错误或正确的解决方案。请帮助和指导。谢谢。

Answer 1

因为你的 onChange 函数

onChange={(e) => {
    setToggle(!toggle);
    setField("basicFees",toggle);
}}

setToggle 是异步的，因此 setField 中的切换在第一次时仍然为 false。所以试试这个

onChange={(e) => {
    const newToggle = !toggle;
    setToggle(newToggle);
    setField("basicFees", newToggle);
}}