注释从这开始~
总览
当咱们在多选框上设置了checked
属性,却没有onChange
处理函数时,会产生 ”You provided a checked
prop to a form field without an onChange
handler” 谬误。为了解决该谬误,能够应用defaultChecked
属性,或者在表单字段上设置onChange
属性。
这里有个例子用来展现谬误是如何产生的。
// App.js
export default function App() {
// ⛔️ Warning: 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`.
return (
<div>
<input type="checkbox" id="subscribe" name="subscribe" checked={true} />
</div>
);
}
上述代码片段的问题在于,咱们在 input
表单上设置了 checked
属性,但却没有提供 onChange
事件处理器。这使得 input
的checked
属性成为动态的。
defaultChecked
解决该谬误的一种形式是,应用 defaultChecked
属性取而代之。
export default function App() {
return (
<div>
<input
type="checkbox"
id="subscribe"
name="subscribe"
defaultChecked={true}
/>
</div>
);
}
defaultChecked
属性为多选框设置了一个初始值,然而该值不是动态的,是能够被更改的。
defaultChecked
属性常被用于不受控(不被开发者管制)的多选框。这象征你必须应用ref
或者表单元素来拜访表单字段的值。
// App.js
import {useRef} from 'react';
// 👇️ Example of uncontrolled checkbox
export default function App() {const ref = useRef(null);
const handleClick = () => {console.log(ref.current.checked);
};
return (
<div>
<input
ref={ref}
type="checkbox"
id="subscribe"
name="subscribe"
defaultChecked={true}
/>
<button onClick={handleClick}>Click</button>
</div>
);
}
每当你点击按钮时,多选框的 checked
值就会被打印到管制台上。
onChange
或者,咱们能够在 input
表单字段上设置 onChange
属性,并处理事件。
import {useState} from 'react';
export default function App() {const [isSubscribed, setIsSubscribed] = useState(false);
const handleChange = event => {setIsSubscribed(event.target.checked);
// 👇️ this is the checkbox itself
console.log(event.target);
// 👇️ this is the checked value of the field
console.log(event.target.checked);
};
return (
<div>
<input
type="checkbox"
id="subscribe"
name="subscribe"
onChange={handleChange}
checked={isSubscribed}
/>
</div>
);
}
咱们做的第一件事是将 input
的checked
值存储在一个叫做 isSubscribed
的状态变量中。
咱们在多选框上设置了
onChange
属性,所以每当值扭转时,handleChange
函数就会被调用。
咱们能够通过 event
对象上的 target
属性来拜访多选框。相似地,咱们能够通过 event.target.checked
来拜访多选框的值。
初始值
如果你想为多选框提供一个初始值,只需将它传递给 useState()
钩子。
import {useState} from 'react';
export default function App() {
// 👇️ set checked to true initially
const [isSubscribed, setIsSubscribed] = useState(true);
const handleChange = event => {setIsSubscribed(event.target.checked);
// 👇️ this is the checkbox itself
console.log(event.target);
// 👇️ this is the checked value of the field
console.log(event.target.checked);
};
return (
<div>
<input
type="checkbox"
id="subscribe"
name="subscribe"
onChange={handleChange}
checked={isSubscribed}
/>
</div>
);
}
咱们向 useState
钩子传递了true
,所以复选框的初始值将是checked
。