反应控制的复选框输入。使用“值”或“检查”属性？答案

【问题标题】：React controlled checkbox input. Use "value" or "checked" property?反应控制的复选框输入。使用“值”或“检查”属性？
【发布时间】：2020-09-24 11:24:24
【问题描述】：

参见下面的 sn-p：

使用 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"/>

【问题讨论】：

value-based 复选框不受控制，因为切换状态（例如使用另一个复选框）不会影响其状态
如果没有清楚地了解接下来将如何处理这些复选框，您将得到模糊的意见，而不是中肯的答案。
@YevgenGorbunkov 我需要控制它的状态并从中读取true 或false。

标签： javascript html reactjs input react-hooks

【解决方案1】：

Checkbox上的value和checked属性有细微的差别

checked Boolean;如果存在，复选框默认开启

value 提交表单时用作复选框值的字符串（如果复选框当前处于打开状态）

Checked 属性用于指定复选框是否被选中，而 value 用于分配在选中复选框时使用的值

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

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

【讨论】：

【解决方案2】：

正式地，如果您使用 input 类型为 checkbox 的元素，您应该使用 checked 属性。这在官方documentation 上有说明。从那里，在您的App 组件上，您可以通过将状态设置为true 或false 来简单地切换复选框状态。

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

【讨论】：