如何在 reactjs 中禁用多个复选框选择

Question

我有一个项目列表，用户可以一次 select 一个项目，例如，如果用户 select 一行，那么我想禁用我想要的其他行一次 select 一行。我真的很努力，但没能解决这个问题。

代码

{menus.map((item,index)=>(<input type="checkbox value={index} />)}

Answer 1

如果您想要 select 一次一行。您可以使用状态来控制它：

const [checked, setChecked] = useState();

  const onClick = (e) => {
    setChecked(e.target.value);
  };

  return (
    <>
      {menus.map((item, index) => (
        <input
          type="checkbox"
          value={index}
          checked={index == checked}
          onClick={onClick}
        />
      ))}
    </>
  );

Answer 2

您可以使用 `checked` 属性和 `onChange` 来制作受控复选框。

const { useState } = React;

function App() {
  const [selItem, setSelItem] = useState(null);
  const handleChange = (item) => {
    item === selItem ? setSelItem(null) : setSelItem(item);
  };
  return (
    <div className="App">
      <label>
        Apple
        <input type="checkbox" checked={selItem === "Apple"} onChange={() => handleChange("Apple")} />
      </label>
      <label>
        Mango
        <input type="checkbox" checked={selItem === "Mango"} onChange={() => handleChange("Mango")} />
      </label>
      <label>
        Banana
        <input type="checkbox" checked={selItem === "Banana"} onChange={() => handleChange("Banana")} />
      </label>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="react"></div>

更详细的例子

您可以在菜单项上添加 isChecked 属性，然后您可以使用此属性.

控制复选框

const { useState } = React;

function App() {
  const [menus, setMenus] = useState([
    { id: 1, label: "Apple", isChecked: false },
    { id: 2, label: "Mango", isChecked: false },
    { id: 3, label: "Banana", isChecked: false },
  ]);
  const handleChange = (e) => {
    setMenus(
      menus.map((o) =>
        o.id == e.target.value ? { ...o, isChecked: !o.isChecked } : { ...o, isChecked: false }
      )
    );
  };
  return (
    <div className="App">
      {menus.map((item) => (
        <label key={item.id}>
          {item.label}
          <input type="checkbox" checked={item.isChecked} value={item.id} onChange={handleChange} />
        </label>
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="react"></div>

如何在 reactjs 中禁用多个复选框选择

How to disabled multiple checkbox selection in reactjs

javascript

dom-events

ecmascript-6

reactjs

您可以使用 `checked` 属性和 `onChange` 来制作受控复选框。

更详细的例子

如何在 reactjs 中禁用多个复选框选择

How to disabled multiple checkbox selection in reactjs

javascript

dom-events

ecmascript-6

reactjs

您可以使用 checked 属性和 onChange 来制作受控复选框。

更详细的例子

您可以使用 `checked` 属性和 `onChange` 来制作受控复选框。