确定是否检查了自定义无线电组件

Question

I have a custom radio component in React, when I check and uncheck the values it adds items to an object and should have true or false based on whether they are checked.

At the moment it adds the true value correctly with the name of the radio but I can't seem to find out how to work to make the option false if another option is chosen.

I am currently using

constructor() {
  super();
  this.state = {
    time_frame: {},
  }

  this.handleRadioChange = this.handleRadioChange.bind(this);
}

handleRadioChange(event) {
  let name = event.target.name
  let timeFrameCopy = this.state.time_frame;
  console.log(event.target)
  timeFrameCopy[event.target.value] = true
  this.setState({[name]: timeFrameCopy,}, this.checkState)
  return
  }
}

checkState(event) {
  console.log(this.state)
}

My radio component is

const Radio = (props) => {
  return (
    <Col>
      <div>
        <input id={props.value} type="radio" name={props.name} value={props.value} className="visually-hidden" onChange={props.handleChange}/>
        <label htmlFor={props.value} className="switch-label checkbox-label text-center">{props.label}</label>
      </div>
    </Col>
  )
}

export default Radio

If I check one radio button and then the other my state still has the data:

time_frame: {single: true, recurring: true}

Even though I would expect one of them to be false

Answer 1

If I understand correctly, you're trying to store in the state an object called time_frame , which is going to contain one pair of property-value per radio input, where the name of each of them would be the property name and the checked status the value. If that's the case, I see a logic problem. since you're hard-coding true (for what I understand from your code) always instead of looking for the value stored and toggling/flipping it.

handleRadioChange() function should be something like:

handleRadioChange(event) {
        let name = event.target.name;
        this.setState((currentState)=>{
        let timeFrameCopy = currentState.time_frame;
         timeFrameCopy[name] = event.target.checked;
          return { "time_frame": timeFrameCopy };
        });
}