在React JS中的编辑过程中如何在选择框中显示选定的值

时间:2018-10-12 07:08:42

标签: javascript reactjs redux redux-form

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

1 个答案:

答案 0 :(得分:0)

反应使此操作变得更加轻松。您可以(而且应该)简单地在select标记本身上写value = {JSON.stringify({id:editData.id,name:editData.name})}},而不是在每个选项上都定义selected。

<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>