这里要注意 React 的受控组件概念。表单组件默认为非受控组件，如果要用 state 存储并控制其值，则需要将表单的 value 赋值为 state，令 state 强制改变表单的值，令其受控

注意，使用受控组件时，要将 value 和其值的改变时间配合在一起使用

Select

const useTaskTargetlector = () => {
    **const [selectedTarget, setSelectedTarget] = useState<string>('全部'); // state**
    const targets = ['全部', '班主任', '学生'];

    const TaskTargetSelector = () => (
        **<Select value={selectedTarget} onValueChange={(e) => setSelectedTarget(e)}> // 令其受控**
            <SelectTrigger className="w-[100px]">
                <SelectValue placeholder="请选择" />
            </SelectTrigger>
            <SelectContent>
                {
                    targets.map((item, index) => {
                        return (
                            <SelectItem
                                key={index}
                                value={item}
                            >
                                {item}
                            </SelectItem>
                        )
                    })
                }
            </SelectContent>
        </Select>
    )

    return { TaskTargetSelector, selectedTarget }
};