Как очистить проверенную радиокнопку в группе радиокнопок при нажатии на ту же проверенную радиокнопку

Question

У меня 2 группы радиопереключателей.

1), содержащий две радиокнопки 2) содержащий массив радиобутонгрупп, каждая группа, содержащая 3 радиобутона

Я хочу очистить отмеченную радиокнопку при нажатии на ту же радиокнопку без использования дополнительной кнопки для очистки.

Мне нужен код javascript, так как responseJS не поддерживает jQuery Пожалуйста, помогите мне решить эту проблему. Я новичок в мире программирования JJ.

Answer 1

Я создал один образец, это может помочь вам

демо в стекблиц

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      group1:[{"value":"1"},
      {"value":"2"},
      {"value":"3"}],
      group1Selected:null,
      group2:[{"value":"1"},
      {"value":"2"},
      {"value":"3"}],
       group2Selected:null,
    };
  }
  ChangeOption = (i,group) =>{
    var groupData = this.state[group] == i?null:i;        
    this.setState({[group]:groupData})
  }
  render() {
    const {group1,group2,group1Selected,group2Selected} = this.state;
    return (
      <div>
        {
          group1.map( (data,i)=><><input type="radio" id={`1-${i}`} onClick={e=>this.ChangeOption(i,"group1Selected")} checked={i==group1Selected?true:false} name="1" value={data.value}/><label for={`1-${i}`}>{data.value}</label></>)
        }
        <br/>
        {
          group2.map( (data,i)=><><input id={`2-${i}`} onClick={e=>this.ChangeOption(i,"group2Selected")} type="radio" checked={i==group2Selected?true:false} name="2" value={data.value}/><label for={`2-${i}`}>{data.value}</label></>)
        }
      </div>
    );
  }
}

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