如何使用select标记的默认值属性

Question

现在我正在做一个选择标签的小任务，就像这样

<select
name="selectmedgroup"
id="selectmedgroup"
value={selectedGroupValue}
onChange={filterOnSelectChange}
>
<option value="" defaultValue hidden>
-Select Group-
</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>

</select>

我想要得到变化的值。以下是我的on change函数和状态

const [selectedGroupValue, setSelectedGroupValue] = useState();
const filterOnSelectChange = (e) => {
setSelectedGroupValue(e.target.value);
console.log(selectedGroupValue);
};

一切似乎工作得很好，但当我注销选择的选项，如果我选择A第一次我得到undefined在原木上。如果我选择B，我得到A注销． 如果我选择C, B就会退出。

我不认为是我的点错了。我不想在状态上有一个初始值，因为这将只是一个选择，我将使用它来过滤用户在页面上看到的内容。因此，第一次在组件安装上，不应该过滤任何内容。

我有一种感觉，问题是第一个选项标签与-选择组-。是否有任何方法可以避免使用第一个选项标签，因为它就像一个占位符，其值我不需要被选中?

如何得到正确的值?请帮

Answer 1

尝试在useEffect钩子上控制selectedGroupValue，像这样解决

import React, { useState } from 'react';
const App = () => {
const [selectedGroupValue, setSelectedGroupValue] = useState();
const filterOnSelectChange = (e) => {
setSelectedGroupValue(e.target.value);
};
React.useEffect(() => {
console.log(selectedGroupValue);
}, [selectedGroupValue]);
return (
<>
<select
name="selectmedgroup"
id="selectmedgroup"
value={selectedGroupValue}
onChange={filterOnSelectChange}
>
<option value="" defaultValue hidden>
-Select Group-
</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
</select>
</>
);
};
export default App;