reactjs - 如果选中复选框,则 ReactJS 禁用表单
问题描述
我有一个复选框。如果选中该复选框,则表单应关闭。但这对我不起作用。我有以下代码:
const [IsChacked, setIsChacked] = useState(false);
const onChangeParams = (name, setChackedValue, defaultChecked) => {
if (name === "foreign_citizen") {
let value = defaultChecked.target.value;
setChackedValue(name, value)
if (parseInt(value) === 1) {
setIsChacked(true);
}
}
};
我的表格是这样的:
<Form.Check
onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))}
name="foreign_citizen"
defaultChecked={values.foreign_citizen}
isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
type="checkbox"
label="Наличие паспорта в деле" />
{IsChacked ? (< > Dos something here</>) : ( <></>)}
如果我选中复选框,它会给出类似错误:TypeError: Cannot read property 'target' of undefined
那么我哪里错了?我不理解...
解决方案
onChange={(e => onChangeParams("foreign_citizen", e, setChackedValue))}
这里事件对象是第二个参数
const onChangeParams = (name, setChackedValue, defaultChecked) => {
if (name === "foreign_citizen") {
let value = defaultChecked.target.value;
但上面的事件对象是第三个参数
尝试改变
onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}
您还必须将表单包含在 Fragment
return (
<>
<Form.Check
onChange={(e => onChangeParams("foreign_citizen", setChackedValue, e,))}
name="foreign_citizen"
defaultChecked={values.foreign_citizen}
isInvalid={touched.foreign_citizen && !!errors.foreign_citizen}
type="checkbox"
label="Наличие паспорта в деле"
/>
{IsChacked ? <> Dos something here</> : <></>}
</>
);
推荐阅读
- asciidoc - 如何在 asciiDoctor 的列表块中编写一些 html 代码?
- push-notification - 如何向超过 5 个主题发送 FCM 消息?
- javascript - 在 Bigtable 上使用 Regex 访问具有部分信息的特定原始数据
- kotlin - 使用 tornadofx 处理 listview 双击
- c# - 为什么 BoxCollider 和 GameObject 移动到错误的位置?
- javascript - 如何在 saga 函数中访问动作值
- django - 当前路径 FOUR/index/{ % url 'four:test' 1 %} 与其中任何一个都不匹配
- javascript - new Date() 给了我错误的 GMT
- artifactory - 获取 JFrog Artifactory 中所有组的所有用户权限
- scala - 如何在 UDF 中使用 scala.xml.transform.RuleTransformer?(给出 scala.MatchError: scala.xml.Node)