javascript - 如何使我的复选框仅被单击一次，而在 React.js 中未选中其他复选框

问题描述

我按照教程创建了一个表单，其中包含要单击的多个复选框。但是，在另一种情况下，我只需要检查一个框。复选框的值是动态的，你永远不知道会创建多少个复选框。但是，只能点击一个。你能帮我找到解决方案吗谢谢。

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;

标签： javascriptreactjsreact-propsreact-componentreact-state

javascript - 如何使我的复选框仅被单击一次，而在 React.js 中未选中其他复选框

问题描述

解决方案

推荐阅读