英文:
react bootstrap form.switch not working as expected
问题
以下是翻译好的部分：
我已经使用了 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);
// 检查是否存在错误，并从错误对象中移除它们：
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);
}}
/>
这里的费用 {form && form.basicFees ? "开" : "关";}
{form && form.basicFees ? (
<>
<Form.Label>基本费用</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` 的输入框，并且开关按钮此时为 '关闭'。
这意味着无论如何在 onChange 事件中使用了 useEffect，状态或表单都没有正确更新。因此，开关按钮的行为与预期相反。
作为初学者，尝试不同的语法或代码后，我仍然无法找到错误或正确的解决方案。请帮助和指导。谢谢。
英文:
I have used react-bootstrap Form. I need to use switch button. If that is true then have to show input box else input box will not show.
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>
Problem: with above code, I am not getting proper result. By default, switch is off. When I first click then ideally it should show input box of basicFeesCharges but it does not shows and switch is 'On' at that time. On second click it shows input box of basicFeesCharges and switch button is 'Off' that time.
Means state or form does not updating properly onChange even if used useEffect. So giving opposite result for switch button.
As a beginner, I am not able to find bug or correct solution even after trying different syntax or code. Please help and guide. Thanks.
答案1
得分: 0
因为你的onChange函数的原因
onChange={(e) => {
setToggle(!toggle);
setField("basicFees", toggle);
}}
setToggle是异步的，所以在setField中的toggle在第一次仍然是false。所以尝试这个
onChange={(e) => {
const newToggle = !toggle;
setToggle(newToggle);
setField("basicFees", newToggle);
}}
英文:
Its because of your onChange function
onChange={(e) => {
setToggle(!toggle);
setField("basicFees",toggle);
}}
setToggle is asynchronous, so the toggle in setField is still false at 1st time. So try this
onChange={(e) => {
const newToggle = !toggle;
setToggle(newToggle);
setField("basicFees", newToggle);
}}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论