如果我初始化选中，则无法检查或取消选中反应中的复选框

Question

我正在使用一些复选框输入构建一个react应用程序，如果我在创建复选框时将check设置为初始值，则无法在页面上检查或取消选中它们。有没有人知道可能会发生什么，或者如何解决这个问题？谢谢。

<label><input type="checkbox" name="reportFlags" value="fraud" checked={reportFlags[0]}/>Fraud </label>

Answer 1

考虑到reportFlags是一个数组，它可以像.[ "fraud", ..]一样有价值。在这种情况下，它应写为：

<label>
  <inut
    type="checkbox"
    name="reportFlags"
    value="fraud"
    checked={reportFlags[0] === "fraud"}
  />Fraud{" "}
</label>

checked道具应该有一个布尔值true或false ..例如，如果你像checked={"fraud"}保持一些真正的价值，你永远不能取消选中它。

function App() {
  return (
    <div>
      <label>
        <input
          type="checkbox"
          name="reportFlags"
          value="fraud"
          checked={"fraud"}
        />Always checked
      </label>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

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

Answer 2

也许为你的输入添加一个onClick

<label><input type="checkbox" name="reportFlags" value="fraud" checked={reportFlags[0]} onClick={e=>{reportFlags[0] = e.checked}}/>Fraud </label>