如何在 React js 中编辑期间在 select 框中显示 selected 值

Question

我创建了一个带有 select 框的表单，用于在用户名被 selected 后显示用户名列表我正在将一个字符串化对象作为值传递给 firebase。当我尝试编辑表单时，我想显示在提交过程中 selected 的值。谁能告诉我如何在表单处于编辑模式时在 select 框中显示 selected 值。我正在使用 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>

Answer 1

React 让这对你来说更容易。您可以（并且应该）简单地在每个选项上定义 selected ，而只需编写 value={JSON.stringify({id: editData.id, name: editData.name})} select 标签本身`

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

如何在 React js 中编辑期间在 select 框中显示 selected 值

How to show the selected value in select box during edit in react js

javascript

reactjs

redux

redux-form