獲取值<select>Nextjs 中帶有 React.useState 的元素

Question

我在 Nextjs 中遇到了來自 React 的 useState 函數的問題。

我有一個元素，其中有幾個。 現在，如果我選擇 e useState 應該使用 selected 的值設置一個變量。

const [value, setValue] = useState('')

...

function logValue() {
  console.log(value)
}

return (
<div>
  <select onChange={(e) => {setValue(e.target.value)}>
    <option value="a">a</option>
    <option selected value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
  </select>

  <button onClick={logValue}>submit</button>
</div>
)

我現在的問題是，我第一次在選擇字段中進行更改時， setValue設置了更改之前的值。

當我加載頁面並將選定的更改為“a”時， logValue打印任何內容。 然后我將值更改為“d”， logValue打印“a”。 然后我將值更改為“c”， logValue打印“b”。 等等...

我怎樣才能做到這一點，當我將選擇字段更改為“a”時， logValue打印“a”？

Answer 1

如果您檢查控制台，您應該能夠看到Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>

所以你需要做類似的事情：

export default function App() {
  const [value, setValue] = useState("b");

  function logValue() {
    console.log(value);
  }

  return (
    <div>
      <select
        value={value}
        onChange={(e) => {
          setValue(e.target.value);
        }}
      >
        <option value="a">a</option>
        <option value="b">b</option>
        <option value="c">c</option>
        <option value="d">d</option>
      </select>

      <button onClick={logValue}>submit</button>
    </div>
  );
}