Как на react сделать checkbox, как radiobuton

Question

Как на react сделать checkbox, как radiobuton

Рейтинг: 0Ответов: 2Опубликовано: 05.03.2023

Делаю фильтр на товар. Использую checkbox, для добавления товаров на экран. По умолчанию показано:

"все товары" - defaultChecked={true}
а на выборке : defaultChecked={false}

Как только пользователь выбирает один товар

"все товары" - defaultChecked={false}
а на выбранном товаре : defaultChecked={true}

 const [value_1, setValue_1] = useState(true)
 const [value_2, setValue_2] = useState(false)
 const [value_3, setValue_3] = useState(false)

const Change = () => {
    if (value_1 === true) {
      setValue_2(false)
      setValue_3(false)
    }
    if (value_2 === true) {
      setValue_1(false)
    }
    else if (value_3 === true) {
      setValue_1(false)
    }
  }
 
 <label>
        <input
          type="checkbox"
          onChange={Change}
          defaultChecked={value_1}
        />
        <span>Все товары</span>
      </label>
      <label>
        <input
          type="checkbox"
          onChange={Change}
          defaultChecked={value_2}
        />
        <span>Масло</span>
      </label>

      <label>
        <input
          type="checkbox"
          onChange={Change}
          defaultChecked={value_3}
        />
        <span>Сыр</span>
      </label>

javascript reactjs checkbox

Источник: Stack Overflow на русском

Answer 1

▲ 0Принят

Если я правильно понял что вам нужно, вот решение:

Логика:

const [selectedItem, setSelectedItem] = useState('all')

const onChangeHandler = (event) => {
  setSelectedItem(event.target.name)
}

Разметка:

<label>
  <input
    name="all"
    type="checkbox"
    onChange={onChangeHandler}
    checked={selectedItem === 'all'}
  />
  <span>Все товары</span>
</label>
<label>
  <input
    name="oil"
    type="checkbox"
    onChange={onChangeHandler}
    checked={selectedItem === 'oil'}
  />
  <span>Масло</span>
</label>

<label>
  <input
    name="cheese"
    type="checkbox"
    onChange={onChangeHandler}
    checked={selectedItem === 'cheese'}
  />
  <span>Сыр</span>
</label>

Answer 2

▲ 0

Лучше избавляться от дублирования кода.

Я бы предложил все параметры инпутов вынести в массив и рендерить массив. Так же при наступлении нужного события, менять значения в массиве.

Так мы избавимся от лишних переменных и не потеряем состояние элементов.

const inputBeginner = [
  {
    id: 'all',
    name: 'Все товары',
    check: true,
  },
  {
    id: 'oil',
    name: 'Масло',
    check: false,
  },
  {
    id: 'cheese',
    name: 'Сыр',
    check: false,
  },
]

const Inputs = () => {
  const [inputData, setInputData] = useState([ ...inputBeginner ]);
  
  const inputClick = (id) => {
    setInputData(prev => prev.map(it => {
      it.check = it.id === id ? true : false;
      return it;
    }))
  }
  
  return (
    <>
      <h3>Выберите категорию</h3>
      {inputData?.map(inp => (
        <label key={inp.id}>
          <input
            name={inp.id}
            type='checkbox'
            checked={inp.check}
            onClick={() => inputClick(inp.id)}
          />
          <span>{inp.name}</span>
        </label>
      ))}
    </>
  )
}

Так же, при необходимости расширить состав свойств инпутов, понадобиться внести данные только в массив и в одном месте изменить рендер.

Как на react сделать checkbox, как radiobuton

Ответы