为什么在 React JS 中没有选中复选框?

Question

我正在使用react final form但我无法checkedcheckbox。我不知道我做错了什么。这是我的 法典

const AppWithIconToggle = ({ input }) => {
console.log("ddd", !!input.value);
return (
<div>
<SForm.Checkbox
checked={!!input.value}
name={input.name}
toggle
onChange={(e, { checked }) => input.onChange(checked)}
/>
</div>
);
};

Answer 1

这是因为您的SForm.Checkbox的checked属性接收undefined。您传递了一个未定义的错误属性(input.value!!undefined因此始终false。将其更改为input.checked然后按预期工作：

const AppWithIconToggle = ({ input }) => {
return (
<div>
<SForm.Checkbox
checked={!!input.checked}
name={input.name}
toggle
onChange={(e, { checked }) => input.onChange(checked)}
/>
</div>
);
};

Answer 2

正如@Sirwan提到的。 您的!!undefined总是返回false

尝试使用 useState hook

// import 'useState'
import React, { useState } from "react"
const AppWithIconToggle = ({ input }) => {
// initial check value is 'false'
const [checked, setChecked] = useState(false)
console.log(checked)
return (
<div>
<SForm.Checkbox
checked={checked} // checked value
name={input.name}
toggle
onChange={() => setChecked(!checked)} // toggle checked value onChange
/>
</div>
)
}

检查您的代码沙盒