Как сделать так, чтобы мой флажок был установлен только один раз, а другие не отмечены в React. js

Question

Я следовал инструкциям и создал форму с таким количеством флажков, которые нужно щелкнуть. Но в другом случае мне нужно поставить только один флажок. Значения флажков - динамические c, и вы никогда не знаете, сколько флажков будет создано. Но можно щелкнуть только по одному. Не могли бы вы помочь мне найти решение, спасибо.

import React, { Component } from 'react';
import Checkbox from "./Checkbox.component";

class PatientSelectTiming extends Component {
state = { 
      options: [...this.props.props],
      checkboxes: [...this.props.props].reduce(
        (options, option) => ({
          ...options,
          [option]: false
        }),
        {}
      ),
      appointmentSlots: null
  };

  handleCheckboxChange = e => {
    const { name } = e.target;
    

    this.setState(prevState => ({
      checkboxes: {
        ...prevState.checkboxes,
        [name]: !prevState.checkboxes[name]
      }
    }))
    }

  handleFormSubmit = formSubmitEvent => {
    formSubmitEvent.preventDefault();
    Object.keys(this.state.checkboxes)
      .filter(checkbox => this.state.checkboxes[checkbox])
      .forEach(checkbox => { 
        let appointmentSlot = [];  
        appointmentSlot.push(checkbox); 
        console.log(appointmentSlot);
        this.setState({appointmentSlots: appointmentSlot})
        localStorage.setItem('appointmentSlots', JSON.stringify(appointmentSlot))     
    });  
  };

  createCheckbox = option => (
    <Checkbox
      label={option}
      isSelected={this.state.checkboxes[option]}
      onCheckboxChange={this.handleCheckboxChange}
      key={option}
    />
  );

  createCheckboxes = () => this.state.options.map(this.createCheckbox);

  render() {
    return (
      <div>
        <p>Only select one item and only first date clicked will be your time</p>
            <form onSubmit={this.handleFormSubmit}>
              {this.createCheckboxes()}
                <button type="submit">
                  Save
                </button>
            </form>
    {this.state.appointmentSlots === null ? <p>Click on any slot to get your time.</p> : <p>Your time is {JSON.parse(localStorage.getItem("appointmentSlots"))}</p>}
    </div>
          )
    }
  }
export default PatientSelectTiming;

Answer 1

Вы можете использовать переключатель. https://www.w3schools.com/tags/att_input_type_radio.asp Радиокнопка аналогична флажку, но позволяет пользователям выбрать только один вариант.