Select 不切换的多个复选框

Question

我是新手。我正在尝试创建一个在单击复选框时隐藏 div 的组件。我遇到的问题是，如果我引入多个复选框，div 的可见性就会切换。是否有其他方法允许选择所有复选框？

功能应该是：单击一个或多个复选框 > div 保持隐藏状态，直到所有复选框都被清除或取消选中。

JSX:

import React, { useState } from 'react';

function reactComponent() {
  const [isChecked, setIsChecked] = useState(false);
  const toggle = () => setIsChecked(!isChecked);

  return (
    <div>
      <div>
        <input type="checkbox" id="option" name="option" onClick={toggle} />
        <label for="scales">option</label>
      </div>

      <div>
        <input type="checkbox" id="option" name="option" onClick={toggle} />
        <label for="scales">option</label>
      </div>

      <div className={isChecked ? "hide" : "block "}>
        <h3 className="red bold">Content</h3>
        <p>lorem Ipsum</p>
      </div>
    </div>
  )
}
export default reactComponent

Answer 1

要实现您所描述的，您可以对复选框使用受控输入，并为每个复选框设置一个单独的状态。这是下面示例的 Codesandbox 演示（如果您需要在 shouldShow 标志中将 some 更改为 every 当且仅当所有复选框已选中）。

function App() {
  const [isChecked, setIsChecked] = useState({ option1: false, option2: false })
  const toggle = ({ target: { name } }) =>
    setIsChecked({ ...isChecked, [name]: !isChecked[name] })

  // Are there any checked ones?
  const shouldShow = Object.values(isChecked).some(val => val)

  return (
    <>
      <div>
        <input
          type="checkbox"
          id="option1"
          name="option1"
          checked={isChecked.option1}
          value={isChecked.option1}
          onClick={toggle}
        />
        <label for="option1">option1</label>
      </div>

      <div>
        <input
          type="checkbox"
          id="option2"
          name="option2"
          checked={isChecked.option2}
          value={isChecked.option2}
          onClick={toggle}
        />
        <label for="option2">option2</label>
      </div>

      <div className={shouldShow ? "hide" : "block "}>
        <h3 className="red bold">Content</h3>
        <p>lorem Ipsum</p>
      </div>
    </>
  )
}

Answer 2

如果您从数组中呈现复选框，则始终可以检查该数组的长度是否与保持状态的选中数组的长度相同。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  const myOptions = ["option1", "option2", "option3", "option4"];
  const [myChecked, setMyChecked] = useState([]);

  const toggle = e => {
    e.persist();
    if (e.target.checked) {
      setMyChecked(oldArray => [...oldArray, e.target.name]);
    } else {
      setMyChecked(oldArray => oldArray.filter(item => item !== e.target.name));
    }
  };

  const showDiv = () => {
    return myChecked.length === myOptions.length;
  };

  return (
    <div>
      {myOptions.map(option => (
        <div>
          <label>
            <input type="checkbox" name={option} onChange={toggle} />
            {option}
          </label>
        </div>
      ))}

      <div className={showDiv() ? "block" : "hide "}>
        <h3>Content</h3>
        <p>lorem Ipsum</p>
      </div>
    </div>
  );
}

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

Codesandbox

Select 不切换的多个复选框

Select multiple checkboxes without toggling

reactjs

gatsby

next.js