Мой флажок не остается отмеченным после нажатия (флажок стиля с помощью CSS)

Question

Я использую React и чистый CSS для создания списка флажков и их стилизации.

Без стилизации мой флажок работает отлично, он остается проверенным и регистрирует правильное значение.

Однако , когда я добавляю стиль, если я нажимаю на флажок, «проверка» не остается. По сути, если я установил флажок, появится «флажок», но если щелкнуть его, флажок не будет сохранен.

Мой компонент флажка

import React from 'react';
import '../mystyles/Dropdown.css'


function Jurisdictions(props) {
  const [selectedOpts, setSelectedOpts] = React.useState(new Set());

  function handleChange(event) {
    const value = event.target.value;
    const checked = event.target.checked;

    if (checked) {
      selectedOpts.add(value);

    } else {
      selectedOpts.delete(value);
    }

    setSelectedOpts(new Set(selectedOpts));
    props.onChange && props.onChange(Array.from(selectedOpts.values()));
  }

  return (
    <div className="dropdown-jurisdictions">
      {props.options.map((opt) => (
        <label className="item-list" key={opt}>
          {opt}
          <input
            type="checkbox"
            name="opts"
            value={opt}
            onChange={handleChange}
            className="my-checkbox"
          />
        </label>
      ))}
    </div>
  )
}


export default Jurisdictions;

Мой стиль CSS - Dropdown.css

.dropdown-jurisdictions {
  overflow-y: auto;
  overflow-x: none;
  height: 170px;
  width: 300px;
  text-align: left;
  color: #3D5A80;
}




.my-checkbox {
  display: none;
}


label {
  display: inline-block;
  position: relative;
  padding-left: 25px;
  font-size: 16px;
  line-height: 20px;
  margin: 5px;
}
label:before {
  line-height: 20px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  background-color: #ffffff;
  border: 1px solid #666666;
}

input[type=checkbox]:checked + label:before,
label:hover:before {
  content: "\2713";
  color: #666666;
  text-align: center;
  line-height: 16px;
}

Я почти уверен, что проблема в моем CSS, но я не вижу причины. Может быть, потому что label не на том же уровне, что и мой checkbox?

Answer 1

Ваш компонент флажка должен иметь свойство checked={this.props.checked} или что-то в этих строках, чтобы указывать, что он находится в проверенном состоянии.

Ваша handleChange функция должна инвертировать состояние вашей переменной checked вstate или props.

Answer 2

Во-первых, у вас нет свойства с именем checked на input. Я думаю, вам нужно будет сначала добавить это свойство. Хотя я не думаю, что это все равно будет работать, потому что стиль, который вы делаете, имеет sibling, а не родительский.

Вы можете увидеть это для селектора родительского элемента: Есть ли родительский селектор CSS?

Надеюсь, это поможет!