反应控制的复选框输入。使用"value"还是"checked"财产？

Question

请参阅下面的代码片段：

使用React 控制复选框输入时，使用value或checked属性有什么区别？

我应该使用哪一个？

function App() {
const [inputState, setInputState] = React.useState(false);
function onChange(event) {
const inputValue = event.target.checked;
setInputState(inputValue);
}
return(
<React.Fragment>
<div>
Using value
<input 
type="checkbox"
onChange={onChange}
value={inputState}      // USES value
/>
</div>
<div>
Using checked
<input 
type="checkbox"
onChange={onChange}
checked={inputState}      // USES checked
/>
</div>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById("root"));

input {
transform: scale(1.5) translateX(10px);
}
div {
margin: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id ="root"/>

Answer 1

复选框上的值和选中的属性之间略有不同

选中布尔值;如果存在，则默认打开该复选框

value提交表单时用作复选框值的字符串(如果复选框当前已打开(

定义选中属性以指定是否选中复选框，而值用于分配选中复选框时使用的值

选中复选框时复选框的默认值为on

MDN 文档非常详细地介绍了这一点

Answer 2

如果您正在使用checkbox类型的元素input，则应正式使用checked属性。这在官方文档中有说明。从那里，在App组件上，您只需通过将状态设置为true或false来切换复选框状态。

话虽如此，使用value道具/属性也可以。但是，就个人而言，我建议不要这样做，即使它可能有效。