Javascript 是否可以取消选择<；收音机/>；通过单击选定的一个（在“反应”中）？

是否可以通过单击所选收音机来取消选择收音机

我知道这是默认的浏览器行为，但我一直在开发这个自定义功能

我也不能这么做

我知道把

包裹在

里面，看起来是这样的：

<label>
  <input type="radio" onChange={() => {}}>
</label>

{}}>

如果我想实现此功能，我必须将

onChange

替换为

onClick

，但是浏览器会对我大喊大叫

应该有

onChange

事件处理程序

那么，如何正确地将

onChange

与

onClick

事件处理程序挂钩呢

我应该只给

onChange

事件一个空函数吗？或者我应该调用

preventDefault

？

签出url吗

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
组1:[{“值”：“1”}，
{“值”：“2”}，
{“值”：“3”}]，
group1Selected:null，
组2:[{“值”：“1”}，
{“值”：“2”}，
{“值”：“3”}]，
group2Selected:null，
};
}
ChangeOption=（i，组）=>{
var groupData=this.state[group]==i？null:i；
this.setState（{[group]：groupData}）
}
render（）{
const{group1，group2，group1Selected，group2Selected}=this.state；
返回(
{
group1.map（（data，i）=>this.ChangeOption（i，“group1Selected”）}选中={i==group1Selected？true:false}name=“1”value={data.value}/>{data.value}）
}


{
group2.map（（data，i）=>this.ChangeOption（i，“group2Selected”）}type=“radio”checked={i==group2Selected？true:false}name=“2”value={data.value}/>{data.value}）
}
);
}
}
render（，document.getElementById（'root'））；

但是代码没有

一旦更改

事件处理程序，浏览器就会对可访问性大喊大叫。感谢您指出，请检查url

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'));