Javascript 如何在ReactJs中使用RadioButton设置状态

我试图使用ReactJs中的单选按钮设置state，但我不知道为什么这不起作用，也许我的代码中缺少了一些东西

  var handleRadio = (event)=>{
      this.setState({views:event.target.value})
     
    }
    

这是我的功能“handleRadio”

街道地图

地形图

卫星地图

这就是我的按钮代码。。 我试图调用单选按钮点击的功能，然后根据我试图设置状态的值，但这段代码在我的项目中无法设置状态这段代码出了什么问题？

---

我的状态名是初始化为空字符串的视图…

我认为应该使用OnChange而不是OnClick属性

---

将

onClick={handleRadio}

更改为

OnChange={handleRadio}

我认为您应该使用OnChange代替onClick属性

---

将

onClick={handleRadio}

更改为

OnChange={handleRadio}

以下是一个完整的示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      views: [
        { txt: 'streets-v11', value: false },
        { txt: 'outdoors-v11', value: true },
        { txt: 'satellite-v9', value: true }
      ]
    };
    this.handleRadio = this.handleRadio.bind(this);
  }

  handleRadio(e) {
    let views = this.state.views.slice(0);
    views = views.map((v) => {
      if (v.txt === e.target.name) v.value = !v.value;
      return v;
    });
    this.setState({ ...this.state, views });
  }

  render() {
    return (
      <h1>
        {this.state.views.map((v) => {
          return (
            <div key={v.txt}>
              <input
                name={v.txt}
                type="radio"
                checked={v.value}
                onClick={this.handleRadio}
              />
              {v.txt}
            </div>
          );
        })}
      </h1>
    );
  }
}

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
观点：[
{txt:'streets-v11'，值：false}，
{txt:'outdoors-v11'，值：true}，
{txt:'satellite-v9'，值：true}
]
};
this.handleRadio=this.handleRadio.bind（this）；
}
handleRadio（e）{
让views=this.state.views.slice（0）；
视图=视图。地图（（v）=>{
如果（v.txt==e.target.name）v.value=！v.value；
返回v；
});
this.setState（{…this.state，views}）；
}
render（）{
返回(
{this.state.views.map（（v）=>{
返回(
{v.txt}
);
})}
);
}
}
render（，document.querySelector（'#root'）；

下面是一个完整的示例

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      views: [
        { txt: 'streets-v11', value: false },
        { txt: 'outdoors-v11', value: true },
        { txt: 'satellite-v9', value: true }
      ]
    };
    this.handleRadio = this.handleRadio.bind(this);
  }

  handleRadio(e) {
    let views = this.state.views.slice(0);
    views = views.map((v) => {
      if (v.txt === e.target.name) v.value = !v.value;
      return v;
    });
    this.setState({ ...this.state, views });
  }

  render() {
    return (
      <h1>
        {this.state.views.map((v) => {
          return (
            <div key={v.txt}>
              <input
                name={v.txt}
                type="radio"
                checked={v.value}
                onClick={this.handleRadio}
              />
              {v.txt}
            </div>
          );
        })}
      </h1>
    );
  }
}

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
观点：[
{txt:'streets-v11'，值：false}，
{txt:'outdoors-v11'，值：true}，
{txt:'satellite-v9'，值：true}
]
};
this.handleRadio=this.handleRadio.bind（this）；
}
handleRadio（e）{
让views=this.state.views.slice（0）；
视图=视图。地图（（v）=>{
如果（v.txt==e.target.name）v.value=！v.value；
返回v；
});
this.setState（{…this.state，views}）；
}
render（）{
返回(
{this.state.views.map（（v）=>{
返回(
{v.txt}
);
})}
);
}
}
render（，document.querySelector（'#root'）；

谢谢，但这也不起作用，我尝试了这个，即使是consolelog也没有从函数中调用！！！函数调用或函数调用有问题吗？谢谢，但这也不起作用我尝试了这个，即使是consolelog也没有从函数调用！！！函数调用或函数是否有问题？请尝试。它使用react boostrap，但只需删除

表单。使用正常的
输入检查
。它使用react boostrap，但只需删除
表单。使用正常的
输入检查
。
heyy谢谢你：））♥ ♥ 非常感谢：）您应该编写
handleRadio=e=>{…}
而不是
handleRadio（e）{…}
，否则键工作
this
将不会引用类实例heyyy Thank A TON:））♥ ♥ 非常感谢：）您应该编写
handleRadio=e=>{…}
而不是
handleRadio（e）{…}
，否则键工作
将不会引用类实例