javascript - 如何从 select 标签获取并输出值

Question

我使用select标签。我希望在单击按钮时能够从此 select 标记读取值。我遇到以下问题，如果我不读取另一个值，而是保留第一个值Argentina，那么我的输出是未定义。除了 onChange 之外，获取变量值的最佳选择是什么？毕竟，只有当用户选择了某些内容时，这才有效。

import React, { useState } from "react";

function Finder() {
  const [selectedValue, setSelectedValue] = useState();

  const find= () => {
    console.log(selectedValue);
  };
  return (
    <div>
      <h1 className="title is-3">Select your option</h1>
      <div className="field has-addons">
        <div className="control is-expanded">
          <div className="select is-fullwidth">
            <select
              name="country"
              onChange={(e) => setSelectedValue(e.target.value)}
            >
              <option value="Argentina">Argentina</option>
              <option value="Bolivia">Bolivia</option>
              <option value="Brazil">Brazil</option>
              <option value="Chile">Chile</option>
              <option value="Colombia">Colombia</option>
              <option value="Ecuador">Ecuador</option>
              <option value="Guyana">Guyana</option>
              <option value="Paraguay">Paraguay</option>
              <option value="Peru">Peru</option>
              <option value="Suriname">Suriname</option>
              <option value="Uruguay">Uruguay</option>
              <option value="Venezuela">Venezuela</option>
            </select>
          </div>
        </div>
        <div className="control">
          <button
            type="button"
            className="button is-primary"
            onClick={() => find()}
          >
            Choose
          </button>
        </div>
      </div>
    </div>
  );
}

export default Finder;

Answer 1

在列表中向用户提供无值(value)的第一个选项是一种很好的做法(并且可以解决此特定问题)。

<select name="country"
onChange={(e) => setSelectedValue(e.target.value)}>
<option value="">Choose your country</option>              
<option value="Argentina">Argentina</option>