如何在反应js中编辑期间在选择框中显示选定的值答案

【问题标题】：How to show the selected value in select box during edit in react js如何在反应js中编辑期间在选择框中显示选定的值
【发布时间】：2019-03-17 08:48:06
【问题描述】：

我创建了一个带有选择框的表单，以在选择用户名后显示用户名列表，我将一个字符串化对象作为值传递给 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>

【问题讨论】：

将选定的值存储在 state 的属性名称中，它是 currentSelectedValue，无论/在您将其发送到 firebase 之前。然后传递一个标志，如果 edit===true 然后传递该选定值。我的假设是否为您清除了它？ .请您详细说明一下

标签： javascript reactjs redux redux-form

【解决方案1】：

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>

【讨论】：