javascript - 如何在反应中使用选择来制作动态状态
问题描述
我有 categoryData 数组(每个项目动态选择)和兴趣数组,我需要根据状态动态的 categoriesData 数量来显示。
这是我的状态:
{
"categoriesData": [
"Sports",
"Pets"
],
"interests": [
"Travel & Tourism",
"Technology & Science",
"Sports",
"Restaurants",
"Photography",
"Pets",
"Music",
"Movies and TV",
"How-to & Style",
]
}
render() {
return (
<div className="row">
<span>Categorias:</span>
{this.state.categoriesData.map((item,index) => {
return (<select value= {item} onChange={(event) => this.categoriesData[????]}>
<option value= "" />
{this.state.interests.map((_item,i) =>
<option key={i} value={_item}>{_item}
</option>
)}
</select>)
})}
</div>
);
}
我正确显示了两个带有所选值的输入选择和选项货物..
问题是 select 的值没有更新,因为我不知道要修改的状态是什么。
解决方案
为什么不将兴趣保存为字典列表,键值对,其中值可以被选中|未选中。
`"interests":
[
{"Travel & Tourism": false},
{"Technology & Science" : true},
{"Restaurants": false}
]`
推荐阅读
- ios - 如何使用 swift 将数据从本地 JSON 加载到表格视图中的标签
- sql - SQL Server:加入/合并表
- javascript - 在另一个类中访问异步函数,对对象属性给出空白响应如何解决这个问题?
- kotlin - 确定两个列表是否包含相同的不同项目
- python - 返回类型取决于输入列表项类型的类型提示函数
- html-framework-7 - Framework7导航不起作用
- azure-web-app-service - 将 ASP.NET Core 5 应用程序从 Windows 移动到 Linux 后出现 InvalidCastException
- textbox - 防止从文本框和您的应用程序 vb.net 失去焦点
- http - Access-Control-Max-Age 不适用于授权标头
- php - Cakephp 3 搜索功能