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

Question

我查看了很多其他类似的问题，但 none 得到了回答！

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

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

我尝试在 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>

Answer 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>

Answer 2

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

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

React Final Form with react-places-autocomplete

reactjs

react-final-form