Установите несколько флажков без переключения - PullRequest
Новая
       5

Установите несколько флажков без переключения

0 голосов
/ 30 октября 2019

Я новичок, чтобы реагировать. Я пытаюсь создать компонент, который скрывает div при нажатии флажка. Проблема, с которой я сталкиваюсь, заключается в том, что, если я установлю несколько флажков, видимость divs будет переключенаЕсть ли альтернативный способ разрешить выбор всех флажков?

Функциональность должна быть следующей: установить флажок или несколько> 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

Ответы [ 2 ]

2 голосов
/ 30 октября 2019

Чтобы достичь того, что вы описали, вы можете использовать контролируемые входы для флажков и иметь отдельный фрагмент состояния для каждого флажка. Вот демоверсия Codesandbox из приведенного ниже примера (вы можете изменить some на every в shouldShow флаг, если вам нужно показать div, если и только если установлены все флажки). 

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>
    </>
  )
}
0 голосов
/ 31 октября 2019

Если вы визуализируете свои флажки из массива, вы всегда можете проверить, равна ли длина этого массива длине проверяемого массива, находящегося в состоянии. 

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

...