Блог

Главная - Вопросы по программированию - Получить значение select onChange в функциональном компоненте

Получить значение select onChange в функциональном компоненте

#reactjs

#reactjs

Вопрос:

У меня есть выбор в функциональном компоненте, и я не могу получить значение при выборе опции. Я смог найти решение только для компонента на основе класса. Я думал, что 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 .

Ответ №1:

Решение для 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>
    )
}

Ответ №2:

Вы не предоставляете значение 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>
        )
    }

Комментарии:

1. Хорошо, теперь изменение обнаружено. Однако, если я регистрирую свои данные в консоли selectedClient до и после моего setSelectedClient(event.target.value); , я вижу одно и то же значение…

2. это связано с asynchronous поведением setState , если вы хотите увидеть изменение состояния, тогда посмотрите это: codesandbox.io/s/competent-brahmagupta-f6i1n?file=/src/App.js

3. В вашем коде у вас нет этой проблемы. Значение немедленно изменяется…

4. поскольку я использовал useEffect перехват, который отслеживает значение selectedClient , он срабатывает только при изменении selectedClient значения

5. Спасибо! Как я могу передать новое значение моему родителю? У меня есть компонент, который содержит мой ClientChoice и другие компоненты с данными, основанными на этом выборе…