Wybrany stan nie zachowuje nowej wybranej opcji - javascript, reactjs

System operacyjny: Windows 10 Pro Przeglądarka: Opera

Tak więc problem, który mam, polega na tym, że po dokonaniu wyboru za pomocą onChange (), wybrana opcja natychmiast wyświetli (wróci) do poprzedniego stanu wybranej opcji.

Tak więc i używając następującego kodu:

cont options = [
{ value: "one", label: "One" },
{ value: "two", label: "Two" }
];

class funcName extends React.Component {

render() {

return (

logChange = (val) => {
console.log("Selected: " + val);
}

<Select
name="form-field-name"
value="one"
options={options}
onChange={logChange}
/>
);
}
}

próba wybrania opcji „Dwa” nigdy nie jestzachowane. Natychmiast po dokonaniu wyboru następuje powrót do wyboru opcji „One”, a wyświetlana wartość (val) jest zawsze „One”. Jeśli wykomentuję linię onChange, pole wyboru działa zgodnie z oczekiwaniami.

Jaki jest problem?

Odpowiedzi:

Twoim głównym problemem jest to, że tak naprawdę nie masz komponentu, który nic nie robi w kodzie, więc Select renderuje się tylko ze statycznymi właściwościami, które ustawiłeś na początku.

Jak mówi Alex, musisz zaktualizować value prop, który wysyłasz do komponentu Selectaby zaktualizował się wizualnie. Na bardzo podstawowym poziomie robisz to, wywołując setState na komponencie nadrzędnym, którego nie utworzyłeś w swoim przykładzie, i przekazując tę ​​wartość do komponentu podrzędnego Select.

<Select
name="form-field-name"
value={this.state.selection.value}
options={options}
onChange={this.changeSelection}
/>

Zaktualizowałem tutaj Twój kod, aby uzyskać pełną próbkę roboczą: https://plnkr.co/edit/TlUe2eJd3OSxGkdHIKJP?p=preview

Określając value pole należy ponownie przypisać wartość za każdym razem, gdy wywoływana jest funkcja renderująca. Posługiwać się defaultValue zamiast.

LE: Warto trochę poczytać o kontrolowanych i niekontrolowanych komponentach: https://facebook.github.io/react/docs/forms.html