[英]Get value of <select> element with React.useState in Nextjs
我在 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”?
如果您检查控制台,您应该能够看到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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.