reactjs - 输入组件reactjs中选择的默认值

Question

我在用户个人资料页面上加载了以下代码。每个用户都有一个种植系统。加载下面的代码时，应用程序应选择用户各自的工厂系统。但是，这并没有发生，因为我无法使用与加载页面的用户相关的选定选项。

<Input
type="select"
name="planting_system_id"
id="planting_system_id"
value={planting_system_id}
autoComplete="planting_system_id"
className="form-control"
placeholder={apiData ? "Planting System" : "Loading..."}
disabled={apiData ? false : true}
onChange={(ev) => this.onChangeInput("planting_system_id", ev)}
>
<option value="">Select...</option>
{plantingSystemsList.map(ps => (
<option value={ps.id} key={ps.id}>
{ps.description}
</option>
))}
</Input>

当尝试使用选项列表中的选择时，React 出现错误，我应该使用 defaultValue 或 value 而不是 selected。但是，我不知道该怎么做。

标签： reactjs

Answer 1

您是否尝试在选项项而不是输入中设置选定的道具？像这样的东西：

<option value={ps.id} key={ps.id} selected={ps.id === planting_system_id}>
{ps.description}
</option>

例子：

const {
  useState
} = React;

const Example = () => {
  const [optionSelected, setOptionSelected] = useState(null);


  const optionsList = [{
      value: "volvo",
      label: "Volvo"
    },
    {
      value: "saab",
      label: "Saab"
    },
    {
      value: "audi",
      label: "Audi"
    },
    {
      value: "mercedes",
      label: "Mercedes"
    }
  ];


  return ( 
  <div>
    <select name="cars" id="cars"> {
      optionsList.map(({
        value,
        label
      }) => ( 
        <option 
          key = {value}
          selected = {optionSelected === value}
          value = {value}
        >
          {label} 
        </option>
      ))
    } </select> 

    <button onClick = {
      () => {
        setOptionSelected("audi");
      }
    }>
      Set Audi as selected 
    </button> 
  </div>
  );
};

ReactDOM.render( <
  Example / > ,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

---

如果您愿意，可以编写代码沙箱： https ://codesandbox.io/embed/late-sunset-jglpd?fontsize=14&hidenavigation=1&theme=dark