Languages
[Edit]
PL

React - lista rozwijana

3 points
Created by:
Dirask JS Member
3430

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 .

// ONLINE-RUNNER:browser;

//import React from 'react';

const Form = () => {
  const colorRef = React.useRef();
  const handleSubmit = e => {
    e.preventDefault();
    const data = {
      color: colorRef.current.value
    };
    const json = JSON.stringify(data);
    console.clear();
    console.log(json);
  };
  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Wybierz sw├│j ulubiony kolor:
          <select ref={colorRef}>
            <option value='red'>Czerwony</option>
            <option value='yellow'>Żółty</option>
            <option value='blue'>Niebieski</option>
          </select>
        </label>
      </div>
      <button type='submit'>Zatwierd┼║</button>
    </form>
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<Form />, root );

ReactJS (PL)

React - lista rozwijana
Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join