Обновление значения компонента Field реагировать на окончательную форму с помощью вызова функции onSelect? - PullRequest
Новая
       40

Обновление значения компонента Field реагировать на окончательную форму с помощью вызова функции onSelect?

0 голосов
/ 29 октября 2019

Я делаю приложение реагирования с машинописным шрифтом и использую реагирующую финальную форму, я использую некоторые библиотеки реагирования для интеграции Google google местах и ​​API геокодера: "реагировать-места-автозаполнение": "^ 7.2.1 " и " response-final-form ":" ^ 6.3.0 "

Проблема, с которой я столкнулся, заключается в обновлении значения в response-final-formполе после того, как пользователь выбирает одно из предложений, представленных компонентом автозаполнения в onSelect: Ниже приведены некоторые выдержки из кода:

Функции onSelect: 

const handleCitySelect = (selectedCity: string) => {
    geocodeByAddress(selectedCity)
      .then(results => getLatLng(results[0]))
      .then(latlng => {
        setCityLatLng(latlng);
      }); <-- Here I need to update the field with selectedCity
  };

  const handleVenueSelect = (selectedVenue: string) => {
    geocodeByAddress(selectedVenue)
      .then(results => getLatLng(results[0]))
      .then(latlng => {
        setVenueLatLng(latlng);
      }); <-- Here I need to update the field with selectedVenue
  };

Ввести окончательную форму: 

      <FinalForm <-- react-final-form component

        validate={validate}
        initialValues={activity}
        onSubmit={handleFinalFormSubmit}
        render={({ handleSubmit, invalid, pristine }) => (
          <Form onSubmit={handleSubmit} loading={loading}> <-- semantic-ui-react component
            <Field
              name="title"
              placeholder="Title"
              value={activity.title}
              component={TextInput}
            />
            <Field
              name="description"
              placeholder="Description"
              rows={3}
              value={activity.description}
              component={TextAreaInput}
            />
            <Field
              component={SelectInput}
              options={category}
              name="category"
              placeholder="Category"
              value={activity.category}
            />
            <Form.Group widths="equal">
              <Field
                component={DateInput}
                name="date"
                date={true}
                placeholder="Date"
                value={activity.date}
              />
              <Field
                component={DateInput}
                name="time"
                time={true}
                placeholder="Time"
                value={activity.time}
              />
            </Form.Group>

            <Field <-- field I need to update after the onSelect callback
              component={PlaceInput}
              name="city"
              placeholder="City"
              options={{ types: ["(cities)"] }}
              value={activity.city}
              onSelect={handleCitySelect}
            />
            <Field <-- field I need to update after the onSelect callback
              component={PlaceInput}
              name="venue"
              placeholder="Venue"
              options={{
                location: new google.maps.LatLng(cityLatLng),
                radius: 1000,
                types: ["establishment"]
              }}
              value={activity.venue}
              onSelect={handleVenueSelect}
            />
<...>

PlaceInput - это пользовательский компонент, который используется в качестве оболочки для компонента PlacesAutocomplete, который выполняет предложения в соответствии с тем, что вводит пользователь.

Спасибо всем, кто может предложить решение. Я искал Интернет и не мог найти быстрое решение для чего-то, что я чувствую, должно быть легким делом. Если нужно больше объяснений, пожалуйста, дайте мне знать или больше выдержек из кода.

Приветствия,

1 Ответ

0 голосов
/ 04 ноября 2019

Чтобы установить значение поля, ваш PlaceInput должен вызвать input.onChange(newValue).

Кроме того, вы не должны передавать value реквизит Field. Это только для флажков и переключателей .

...