React - useState vol. 4

Poznajemy hook useState w odniesieniu do pracy z obiektami jako stanem, pamiętając o niemutowalności stanów-obiektów złożonych. Do dzieła.

Ok, nasz stan:

import { useState } from 'react';

export default function Form() {
  const [form, setForm] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com',
  });

Ok, pierwszy label:

return (
    <>
      <label>
        First name:
        <input
          value={form.firstName}
          onChange={e => {
            setForm({
              ...form,
              firstName: e.target.value
            });
          }}
        />
      </label>

Mam nadzieję, że label oplatający input element nas nie dziwi, bo to czysty HTML. Na zmianę wartości wykonujemy nową kopię obiektu plus pod firstName dodajemy zmodyfikowaną wartość.

Kolejne labele wyglądają dokładnie tak samo:

<label>
        Last name:
        <input
          value={form.lastName}
          onChange={e => {
            setForm({
              ...form,
              lastName: e.target.value
            });
          }}
        />
      </label>
      <label>
        Email:
        <input
          value={form.email}
          onChange={e => {
            setForm({
              ...form,
              email: e.target.value
            });
          }}
        />
      </label>
      <p>
        {form.firstName}{' '}
        {form.lastName}{' '}
        ({form.email})
      </p>
    </>
  );
}

Ok, teraz obiekt z zagnieżdżenami:

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    name: 'Niki de Saint Phalle',
    artwork: {
      title: 'Blue Nana',
      city: 'Hamburg',
      image: 'https://i.imgur.com/Sd1AgUOm.jpg',
    }
  });

Funkcja modyfikująca name, czyli atrybut z top-levelu:

function handleNameChange(e) {
    setPerson({
      ...person,
      name: e.target.value
    });
  }

Funkcje modyfikujące atrybuty wewnątrz person.artwok:

 function handleTitleChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        title: e.target.value
      }
    });
  }

  function handleCityChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        city: e.target.value
      }
    });
  }

  function handleImageChange(e) {
    setPerson({
      ...person,
      artwork: {
        ...person.artwork,
        image: e.target.value
      }
    });
  }

Mam nadzieję, że to oczywiste, że te funkcje wewnątrz RFC są definiowane od zera przy każdym re-renderze (useCallback nie użyliśmy). Ok, JSX:

return (
    <>
      <label>
        Name:
        <input
          value={person.name}
          onChange={handleNameChange}
        />
      </label>
      <label>
        Title:
        <input
          value={person.artwork.title}
          onChange={handleTitleChange}
        />
      </label>
      <label>
        City:
        <input
          value={person.artwork.city}
          onChange={handleCityChange}
        />
      </label>
      <label>
        Image:
        <input
          value={person.artwork.image}
          onChange={handleImageChange}
        />
      </label>
      <p>
        <i>{person.artwork.title}</i>
        {' by '}
        {person.name}
        <br />
        (located in {person.artwork.city})
      </p>
      <img 
        src={person.artwork.image} 
        alt={person.artwork.title}
      />
    </>
  );
}

Więcej o useState niedługo.

React – useState vol. 4