#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.js3. В вашем коде у вас нет этой проблемы. Значение немедленно изменяется…
4. поскольку я использовал
useEffect
перехват, который отслеживает значениеselectedClient
, он срабатывает только при измененииselectedClient
значения5. Спасибо! Как я могу передать новое значение моему родителю? У меня есть компонент, который содержит мой
ClientChoice
и другие компоненты с данными, основанными на этом выборе…