如何使用 React Js 在下拉列表中获取所选选项的值？

Question

我正在尝试使用 React Js 获取下拉列表的选定值。

它给出了价值观，但给出了错误的价值观

请在下面找到我的代码。

<select 
    name="category-select-1"
    class="form-select category-select" 
    id="category-select-1" 
    value={eventCategory} 
    onChange={handleEventCategory}>
    <option value={"default"}>Category</option>
    <option value={"meeting"}>Meeting</option>
    <option value={"workhours"}>Work Hours</option>
    <option value={"business"}>Business</option>
    <option value={"holiday"}>Holiday</option>
    <option value={"getTogether"}>Get-Together</option>
    <option value={"gifts"}>Gifts</option>
    <option value={"birthday"}>Birthday</option>
    <option value={"anniversary"}>Anniversary</option>
    <option value={"others"}>Others</option>
</select>

这就是我正在尝试的方法。

---

const [eventCategory, setEventCategory] = useState();

const handleEventCategory = (e)=>{
    setEventCategory(e.target.value);
    console.log(eventCategory);
}

它从选项中随机给出值。 请帮我解决这个问题。 谢谢

Answer 1

在 React 中设置 state 就像异步 function 一样。
这意味着当您设置 state 并在其后放置一个console.log时，它可能会在 state 实际完成更新之前运行。

这就是我们使用useEffect的原因，这是一个内置的 React 钩子，当其中一个依赖项发生更改时，它会激活回调。

例子：

useEffect(() => {
   console.log(eventCategory)
   // Whatever else we want to do after the state has been updated.
}, [eventCategory])

只有在 state 完成更改并发生渲染后，此console.log才会运行。

• 注意：示例中的“eventCategory”可以与您正在处理的任何其他 state 部件互换。

查看文档以获取有关此的更多信息。

Answer 2

你的代码看起来不错。

const handleEventCategory = (e)=>{
    setEventCategory(e.target.value);
    console.log(eventCategory);
}

console.log(eventCategory);

由于 setState 是异步的，因此在更改 state 之前打印 eventCategory 值。 如果你在handleEventCategory下面添加console.log，你会得到正确的output。