Werken met select in React
Laten we ons nu bezighouden met dropdown-lijsten
select.
Werken ermee verschilt ook praktisch niet
van werken met inputs en checkboxes.
Stel dat we een select hebben zoals deze:
function App() {
return <div>
<select>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
</div>;
}
Laten we de werking ervan verzorgen met React:
function App() {
const [value, setValue] = useState('');
function handleChange(event) {
setValue(event.target.value);
}
return <div>
<select value={value} onChange={handleChange}>
<option>text1</option>
<option>text2</option>
<option>text3</option>
<option>text4</option>
</select>
<p>
uw keuze: {value}
</p>
</div>;
}
Maak een dropdown-lijst van steden. Maak ook een paragraaf waarin de keuze van de gebruiker wordt weergegeven.