使用 onSelect 函数调用更新 react-final-form Field 组件的值？

Question

我正在使用 typescript 和 react-final-form 做一个反应应用程序，我正在使用一些反应库来集成谷歌位置和地理编码器 API：“react-places-autocomplete”：“^7.2 .1" 和 "react-final-form": "^6.3.0"

我遇到的问题是在用户选择 onSelect 上的自动完成组件提供的建议之一后更新 react-final-form 字段中的值：以下是代码的一些摘录：

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 组件的包装服务，根据用户键入的内容提供建议。

感谢任何可以提出解决方案的人。我搜索了互联网，但找不到快速解决我认为应该不费吹灰之力的事情。如果需要更多解释，请告诉我或更多代码摘录。

干杯，

Answer 1

要设置字段值，您的PlaceInput 需要调用input.onChange(newValue)。

另外，您不应该将 value 属性传递给 Field。 That's only for checkboxes and radio buttons.