React JSX Select DefaultValue 未生效答案

【问题标题】：React JSX Select DefaultValue not taking effectReact JSX Select DefaultValue 未生效
【发布时间】：2021-07-11 17:49:00
【问题描述】：

我一直在查看 React 中的表单元素，并检查了文档 (https://reactjs.org/docs/forms.html#the-select-tag) 和 stackoverflow 上的答案，例如 (How to set a default value in react-select 和 React JSX: selecting "selected" on selected <select> option)。

我没有创建这样的选择组件。我有一个标题组件，当我渲染标题时，我有一个选择元素。 select 元素是通过 Ajax 调用填充的，这可能是未设置默认值的原因。

我的代码如下所示：

useEffect(() => {
  // do ajax call and set currenclyList
});
return (
  <header className="row block plain center">
    <div>
      <h1>Shopping Cart</h1>
    </div>
    <div>
      <select
        className="dropdown"
        onChange={handleChange}
        defaultValue="USDGBP"
      >
        {Object.keys(currencyList).map((element) => {
          return (
            <option
              key={element}
              value={element}
              data-price={currencyList[element]}
            >
              {element}
            </option>
          );
        })}
      </select>
    </div>
  </header>
);

我已经设置了 defaultValue="USDGBP"，因为我知道下拉列表最终会填充该值和其他几个值。但是当元素被渲染时，它总是被设置为列表中的第一项。

如何强制此选择元素找到 USDGBP 元素并将其设置为默认值？

【问题讨论】：

@DaviMendesDev 来自 OP 问题的第一个链接：“React 不使用 selected 属性，而是在根选择标签上使用 value 属性。”

标签： javascript reactjs select

【解决方案1】：

使用value 属性代替defaultValue。

function App() {
  const currencyList = { GBPUSD: 16.45, USDGBP: 15.74, EURGBP: 12.45 };
  const [selected, setSelected] = React.useState("USDGBP");

  const handleChange = (event) => {
    setSelected(event.target.value);
  };
  return (
    <header className="row block plain center">
      <div>
        <h1>Shopping Cart</h1>
      </div>
      <div>
        <select className="dropdown" onChange={handleChange} value={selected}>
          {Object.keys(currencyList).map((element) => {
            return (
              <option
                value={element}
                key={element}
                data-price={currencyList[element]}
              >
                {element}
              </option>
            );
          })}
        </select>
      </div>
    </header>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

【讨论】：