react手写写一个选择器

在React中，我们可以创建一个简单的选择器组件，比如一个下拉框或多选列表。这里我们展示一个基本的单选框选择器的例子：
import React, { useState } from 'react';

// 假设我们有三个选项
const options = ['Option 1', 'Option 2', 'Option 3'];

const SelectBox = () => {
// 使用useState管理当前选中的值
const [selectedValue, setSelectedValue] = useState(options[0]);

const handleChange = (event) => {
setSelectedValue(event.target.value);
};

return (
<div>
<label>
Choose an option:
<select value={selectedValue} onChange={handleChange}>
{options.map((option, index) => (
<option key={index} value={option}>
{option}
</option>
))}
</select>
</label>

<p>Selected Value: {selectedValue}</p>
</div>
);
};

export default SelectBox;
登录后复制
这个组件接受用户的选择，并通过handleChange函数更新状态selectedValue。然后在render方法中，它渲染了一个下拉列表，每个选项都绑定到一个value属性，当用户更改选择时，对应的value会触发回调。