在React中,可以使用useState
来创建一个state变量,并使用onChange
事件处理程序将选择的值更新到state中。然后可以使用selectedValue
来获取当前选中的值。
以下是一个示例:
import React, { useState } from 'react';
function App() {
const [selectedValue, setSelectedValue] = useState('');
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
return (
<div>
<select value={selectedValue} onChange={handleChange}>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<p>Selected value: {selectedValue}</p>
</div>
);
}
export default App;
在这个示例中,我们创建了一个名为selectedValue
的state变量,并在select
元素中使用value={selectedValue}
将其与当前选中的值绑定。当用户选择不同的选项时,handleChange
事件处理程序会更新selectedValue
的值。最后,我们在页面上显示selectedValue
的值。