Выбор только одного checkbox (reactjs)

Question

Нужно сделать список чекбоксов, но выбирать можно только один из них.

onCheckPage = (item) => {
let exist = this.state.formData.category && this.state.formData.category.id === item.id;
if (exist) {
  this.state.formData.category = null;
} else {
  this.state.formData.category = item;
}};

isChecked = (id) => {
if (this.state.formData.category) {
  return this.state.formData.category.id === id;
} else {
  return false;
}};

let categoriesList = this.props.categories.map((item) => (
  <CategoryItem key={item.id} item={item} onCheck={this.onCheckPage} isChecked={this.isChecked(item.id)}
                role={this.props.role}/>
));

Answer 1

Вот так должно работать

state = {
    checkedId:''
}   

setCheckedId = (id) => {
   this.setState({ checkedId: id})
};
let categoriesList = this.props.categories.map((item) => (
  <CategoryItem key={item.id} item={item} onCheck={this.setCheckedId} checkedId={this.state.checkedId}
                role={this.props.role}/>


const CategoryItem = ({ item, onCheck, role, checkedId}) => {

const isCurrentChecked = item.id === checkedId

  return (
      <input
        type="checkbox"
        onClick={()=> onCheck(item.id)}
        checked={isCurrentChecked }
      />
  );
};

Answer 2

Можно хранить состояние активного чекбокса в родительском компоненте, и далее чекбок отмечается если он активный. Примерно так:

// import React from "react";

const App = () => {
  const [activeCheckbox, setActiveCheckbox] = React.useState(null);

  return (
    <div>
      {[...Array(10)].map((_, idx) => (
        <div key={idx}>
          <label>Checkbox {idx}</label>
          <input
            type="checkbox"
            checked={idx === activeCheckbox}
            onClick={() => setActiveCheckbox(idx)}
          />
        </div>
      ))}
    </div>
  );
};

// export default App;

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Можно добавить код чтобы можно было убирать выделение с текущего чекбокса.

БЛОГ НА HUSL

Выбор только одного checkbox (reactjs)

Ответы (2 шт):