[Edit]

React - lista rozwijana na podstawie tablicy

1 contributors

2 contributions

0 discussions

0 points

Created by:

Anisha-Kidd

652

W tym artykule chcielibyśmy pokazać, jak stworzyć listę rozwijaną na podstawie tablicy w Reakcie.

Szybkie rozwiązanie:

xxxxxxxxxx
 
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';
​
const colors = [
    {value: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];
​
const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
            color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            Wybierz swój ulubiony kolor:
            <select value={color} onChange={handleChange}>
              {colors.map(item => {
                return (<option key={item.value} value={item.value}>{item.text}</option>);
              })}
            </select>
          </label>
        </div>
        <button type='submit'>Zatwierdź</button>
      </form>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Auto running

Przykład wybranego komponentu niestandardowego

Edit

W poniższym przykładzie przesyłamy tablicę opcji jako właściwość.

xxxxxxxxxx
 
// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:
// import React from 'react';
// import ReactDOM from 'react-dom';
​
const Select = ({value, options, onChange}) => {
    return (
      <select value={value} onChange={onChange}>
        {options.map(option => {
          return (<option key={option.value} value={option.value}>{option.text}</option>);
        })}
      </select>
    );
};
​
const colors = [
    {value: 'czerwony',  text: 'Czerwony'},
    {value: 'żółty',     text: 'Żółty'},
    {value: 'niebieski', text: 'Niebieski'}
];
​
const App = () => {
    const [color, setColor] = React.useState('red');
    const handleChange = e => setColor(e.target.value);
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
            color: color
        };
        const json = JSON.stringify(data);
        console.clear();
        console.log(json);
    };
    return (
      <form onSubmit={handleSubmit}>
        <div>
          <label>
            <span>Wybierz swój ulubiony kolor:</span>
            <Select value={color} options={colors} onChange={handleChange} />
          </label>
        </div>
        <button type='submit'>Submit</button>
      </form>
    );
};
​
const root = document.querySelector('#root');
ReactDOM.render(<App />, root);