使用 react-places-autocomplete 反应最终形式答案

【问题标题】：React Final Form with react-places-autocomplete使用 react-places-autocomplete 反应最终形式
【发布时间】：2020-07-02 23:09:02
【问题描述】：

我看过很多其他类似的问题，但没有一个答案！

到目前为止，我已经创建了一个标准的记录级别，如下所示：https://final-form.org/docs/react-final-form/examples/record-level-validation

我正在使用带有 react-places-autocomplete 的 React Final Form。当您在字段中输入信息时，我想包括 react-places-autocomplete 的选择以显示在上面链接中看到的值中。

我尝试根据 react-places-autocomplete 添加以下代码：

         <Field name="location">
          {({input, meta}) => (
            <PlacesAutocomplete
              value={address}
              onChange={setAddress}
              onSelect={handleSelect}
              >
              {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
                <div>
                <p> latitude: {coordinates.lat}</p>
                <p> longitude: {coordinates.lng}</p>
                  <input
                    {...input}
                    {...getInputProps({
                      placeholder: 'Search Places ...',
                      className: 'location-search-input',
                    })}
                  />
                  <div className="autocomplete-dropdown-container">
                    {loading && <div>Loading...</div>}
                    {suggestions.map(suggestion => {
                      const className = suggestion.active
                        ? 'suggestion-item--active'
                        : 'suggestion-item';
                      // inline style for demonstration purpose
                      const style = suggestion.active
                        ? { backgroundColor: '#fafafa', cursor: 'pointer' }
                        : { backgroundColor: '#ffffff', cursor: 'pointer' };
                      return (
                        <div
                          {...getSuggestionItemProps(suggestion, {
                            className,
                            style,
                          })}
                        >
                          <span>{suggestion.description}</span>
                        </div>
                      );
                    })}
                  </div>
                </div>
              )}
            </PlacesAutocomplete>
          )}
         </Field>

我想知道如何在此处将 placeautocomplete 的输入添加到此值中：

<pre>{JSON.stringify(values, undefined, 2)}</pre>

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

抱歉，我的答案太旧了，但请尝试使用 react-google-places-autocomplete。更好的是如何使用它....

<Field name="city">
    {({ input, meta }) => (
        <div style={{ width: '100%' }}>
            <GooglePlacesAutocomplete
                selectProps={{
                    value: input.value,
                    onChange: e => {
                        input.onChange(e.label)
                    },
                }}
                apiKey={GOOGLE_API_KEY}
                autocompletionRequest={{
                    componentRestrictions: {
                        // country: [values.group_country && values.group_country.value]
                        country: ['CA', 'GB', 'US']
                    },
                    types:['(cities)']
                }}
            />
            {meta.error && meta.touched && 
                <span className="text-danger small block">{meta.error}</span>}
        </div>
    )}
</Field>

【讨论】：

【解决方案2】：

答案确实很有帮助，但是我在选择地址后发现输入字段为空，所以我删除了一行“value：input.value”，它对我有用。

【讨论】：

完美运行。谢谢。