reactjs - 获取功能组件中select onChange的值

Question

我在功能组件中有一个选择，当我选择一个选项时我无法获得值。我只能找到基于类的组件的解决方案。我认为 useState 可以解决问题，但我错过了一些东西......

const ClientChoice = (props) => {
    const [selectedClient,setSelectedClient] = useState([]);

    function handleSelectChange(event) {
        setSelectedClient(event.target.value);
    }

    return (
        <select onChange={handleSelectChange}>
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
    )
}

目标是null。

Answer 1

您没有提供值select并更改默认值selectedClient：

   const ClientChoice = (props) => {
        const [selectedClient,setSelectedClient] = useState("one"); //default value
    
        function handleSelectChange(event) {
            setSelectedClient(event.target.value);
        }
    
        return (
            <select value={selectedClient} onChange={handleSelectChange}> //set value here
                <option value="one">One</option>
                <option value="two">Two</option>
                <option value="three">Three</option>
            </select>
        )
    }

Answer 2

FC 的解决方案：为您的选择增加价值

const ClientChoice = (props) => {
    const [selectedClient,setSelectedClient] = useState([]);

    function handleSelectChange(event) {
        setSelectedClient(event.target.value);
    }

    return (
        <select value={selectedClient} onChange={handleSelectChange}> //set value here
            <option value="one">One</option>
            <option value="two">Two</option>
            <option value="three">Three</option>
        </select>
    )
}