javascript - 如何在反应js中编辑期间在选择框中显示选定的值
问题描述
我创建了一个带有选择框的表单,以在选择用户名后显示用户名列表我将字符串化对象作为值传递给 firebase。当我尝试编辑表单时,我想显示在提交期间选择的值。谁能告诉我当表单处于编辑模式时如何在选择框中显示选定的值。我正在使用 redux 形式。
<select
{...input} className="form-control">
<option value="" disabled>{selectPlaceHolder}</option>
{Object.keys(datas).map((key) => {
return (
<option value={JSON.stringify({id: key, name: datas[key].name})} key={key}>
{datas[key].name}
</option>
);
})}
</select>
解决方案
React 使这对你来说更容易。除了在每个选项上定义 selected ,您可以(并且应该)简单地在 select 标签本身上写 value={JSON.stringify({id: editData.id, name: editData.name})} `
<select
{...input} className="form-control" value={JSON.stringify({id: editData.id, name: editData.name})}>
<option value="" disabled>{selectPlaceHolder}</option>
{Object.keys(datas).map((key) => {
return (
<option value={JSON.stringify({id: key, name: datas[key].name})} key={key}>
{datas[key].name}
</option>
);
})}
</select>
推荐阅读
- typescript - Blazor 的 TypeScript 类型
- reactjs - 如何使用功能性 React 组件使用回调事件
- c++ - 以下哪一项是正确的行为(g++ vs clang++-12)?
- reactjs - 同一个项目中的两个 React 实例
- android - Jetpack 撰写在设备内保存自定义对象可变列表的最佳方法是什么?
- sql-server - 使用 Get-StoredCredential 的 SQL Server 连接
- apache-nifi - Nifi 流不运行并显示活动线程消息
- windows - 笔记本中的非 ASCII 字符
- android - 如何摆脱这个错误,exoplayer 与我的应用程序发生冲突
- python - Python Tkinter Entry.get() 给出了先前的输入