Обновить состояние с помощью вложенного объекта в форме - PullRequest
Новая
       49

Обновить состояние с помощью вложенного объекта в форме

0 голосов
/ 12 марта 2020

У меня проблемы с попыткой обновить вложенный объект с помощью useState. У меня есть форма, где пользователи могут добавлять / редактировать информацию об автомобиле. Поэтому в основном я работаю с автомобилем в местном штате, чтобы отобразить данные в форме. 

 //Local state to handle a Car
const [car, setCar] = useState({
    brand: "Mazda",
    vin: "JMB838783S",
    location: {
      address: "9098 West Alabama Street",
      lat: "-22.73984",
      long: "8.44538",
    },
    contact: {
      phone: "+16758907676",
      email: "car@provider.com",
    }
  });

Однако, когда я попытался отредактировать информацию об адресе или телефоне, я не могу заставить ее работать, используя функцию в onChange 

const handleInputChanges = e => {

    setCar({
      ...car,
      [e.target.name] : e.target.value
    })
};

Форма 

<FormContainer onSubmit={handleSubmit}>
            <DropPictureZone onImageDropped={setThumbnailDropped} />

            <InputText
              type="text"
              name="brand"
              placeholder="Brand"
              value={name}
              onChange={handleInputChanges}
            />

            <InputText
              type="text"
              name="address"
              placeholder="Address"
              value={location.address}
              onChange={handleInputChanges}
            />

            <div className="p-grid">
              <div className="p-col">
                <InputText
                  type="text"
                  name="lat"
                  placeholder="Latitude"
                  value={location.lat}
                  onChange={handleInputChanges}
                />
              </div>

            <div className="p-grid">
              <div className="p-col-4">
                <InputMask
                  mask="(xxx)-xxx-xxxx"
                  name="phone"
                  placeholder="Phone Number"
                  value={contact.phone}
                  onChange={handleInputChanges}
                />
              </div>

              <div className="p-col">
                <InputText
                  type="text"
                  name="email"
                  placeholder="Email"
                  value={contact.email}
                  onChange={handleInputChanges}
                />
              </div>
            </div>

            <Button label="Save" />
          </FormContainer>

Как правильно достичь этого? Спасибо.

1 Ответ

1 голос
/ 12 марта 2020

Есть много правильных ответов на эту проблему. Вот один из них:

Измените ваш обработчик изменений, чтобы он принимал параметр карри, информирующий его о том, какой вложенный объект нужно обновить.

Новый обработчик будет выглядеть примерно так: 

const handleInputChanges = level => e => {
  if (!level) {
    // Assume root level
    setCar({
      ...car,
      [e.target.name] : e.target.value
    })
  } else {
    setCar({
      ...car,
      [level]: {
        ...car[level],
        [e.target.name] : e.target.value
      }
    })
  }
};

Затем измените вашу форму следующим образом: 

<InputText
  type="text"
  name="brand"
  placeholder="Brand"
  value={name}
  onChange={handleInputChanges()} // Root level
/>

<InputText
  type="text"
  name="address"
  placeholder="Address"
  value={location.address}
  onChange={handleInputChanges('location')} // location object
/>

<InputMask
  mask="(xxx)-xxx-xxxx"
  name="phone"
  placeholder="Phone Number"
  value={contact.phone}
  onChange={handleInputChanges('contact')} // contact object
/>

Это просто пример каждого типа, вам нужно изменить каждое поле.

...