javascript - 如何在 ReactJs 中使用 RadioButton 设置状态
问题描述
我试图使用 ReactJs 中的单选按钮设置状态,但我不知道为什么这不起作用,也许我的代码中缺少一些东西
var handleRadio = (event)=>{
this.setState({views:event.target.value})
}
这是我的功能“handleRadio”
<input
type="radio"
checked={this.state.views === "streets-v11"}
onClick={handleRadio}
value="streets-v11"
/> Street Map <br />
<input
type="radio"
checked={this.state.views === 'outdoors-v11'}
onClick={handleRadio}
value="outdoors-v11"
/> Topo Map <br />
<input
type="radio"
checked={this.state.views === 'satellite-v9'}
onClick={handleRadio}
value="satellite-v9"
/> Satellite Map
这就是我的按钮代码.. 我试图在单选按钮单击时调用该函数,然后据此我试图设置 state 的值,但这段代码在我的项目中无法 setState 这段代码有什么问题?我的州名是初始化为空字符串的视图....
解决方案
这是一个完整的例子
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'));
推荐阅读
- java - 为什么 Timer 在 for 循环中不起作用?
- node.js - NGINX - 主机 2 HTTPS 节点应用程序
- javascript - 通过 MS Graph API 访问 AzureAD 组列表需要什么范围?
- json - Flutter:使用共享首选项插件存储保存的收藏列表
- c# - 反序列化xml对象列表
- python-3.x - 如何在 jupyter 实验室中运行魔法命令
- javascript - FlatList 不在功能组件中重新渲染?
- php - 在 Laravel 控制器中访问 JSON 数组
- c# - Windows Core Audio API - 更改应用程序音量,为某些应用程序选择了错误的音频接口
- java - 为什么我的代码只用字符串替换方法替换某些字符?