时间戳

首页 > 解决方案 > 如果我初始化选中，则无法选中或取消选中复选框

html - 如果我初始化选中，则无法选中或取消选中复选框

问题描述

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

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

标签： htmlreactjs

解决方案

考虑到这reportFlags是一个数组，它的值可以是.[ "fraud", ..]. 在这种情况下，它应该写成：

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

checkedprops 应该有一个布尔值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>

推荐阅读