PL
React - lista rozwijana
3 points
W tym artykule chcielibyśmy pokazać, jak dodać listę rozwijaną w React.
W poniższym przykładzie za pomocą hooka React.useRef tworzymy referencję colorRef do listy rozwijanej, z której wybierzemy ulubiony kolor. W naszym przypadku do wyboru będzie kolor czerwony, żółty lub niebieski.
Obiekt data jest tworzony za pomocą referencji DOM, która znajduje się wewnątrz funkcji handleSubmit i odwołuje się do listy rozwijanej posiadającej właściwość colorRef.current.value.
Finalnie funkcja handleSubmit wyświetla w konsoli nasz obiekt data przekonwertowany na JSON .
xxxxxxxxxx1
//import React from 'react';2
3
const Form = () => {4
const colorRef = React.useRef();5
const handleSubmit = e => {6
e.preventDefault();7
const data = {8
color: colorRef.current.value9
};10
const json = JSON.stringify(data);11
console.clear();12
console.log(json);13
};14
return (15
<form onSubmit={handleSubmit}>16
<div>17
<label>18
Wybierz swój ulubiony kolor:19
<select ref={colorRef}>20
<option value='red'>Czerwony</option>21
<option value='yellow'>Żółty</option>22
<option value='blue'>Niebieski</option>23
</select>24
</label>25
</div>26
<button type='submit'>Zatwierdź</button>27
</form>28
);29
};30
31
const root = document.querySelector('#root');32
ReactDOM.render(<Form />, root );