function Checked() {
const [checked, setChecked] = useState(false);
return (
<div>
<input
type="checkbox"
checked={checked}
onChange={() => setChecked((prevState) => !prevState)}
/>
</div>
);
}
記得,給了checked一定要再給onChange的handler
checkbox在html裡面,如果加了checked就會預設勾選
而且就算給它false的值,還是會預設勾選
React修正了這一點,不會有上述問題
它還有提供一個defaultChecked功能,可以設定預設勾選或沒勾
不過記得如果是做controlled component的話
不需要用到defaultChecked
在useState裡面給它false或true就是預設值哩!!
如果要讓它不能編輯的話,加個props disabled={ isEditable } 就好嚕
如果沒寫好會報錯:
You provided a checked
prop to a form field without an onChange
handler. This will render a read-only field. If the field should be mutable use defaultChecked
. Otherwise, set either onChange
or readOnly
.