Google Places (多个)

Question

我希望用户能够输入多个位置:例如

Melbourne, Perth, Sydney.

我目前正在使用

    <input id="searchTextField"></input>
    <script type="text/javascript">
      function initialize() {
        var options = {
          componentRestrictions: {country: 'au'}
        };

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input, options);
      }

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

然而，我想把它移到Material-UI Autocomplete -虽然它是有效的，但由于自动完成需要选项，它不允许我选择位置，没有它就不会工作。我想知道让多个位置工作的更好方法是什么。

<Autocomplete
            id="searchTextField"
            name="country"
            options={countries}
            required
            multiple
            variant="outlined" fullWidth
            getOptionLabel={option => option.label}
          //  style={{ width: 300 }}
            onChange={(e, value) => {
              console.log(value);
              setFieldValue(
                "country",
                value !== null ? value : initialValues.country
              );
            }}
            renderInput={params => (
              <TextField
                margin="normal"
                label="Country"
                variant="outlined" 
                fullWidth
                required
                name="country"
                {...params}
              />
            )}
          />

我也尝试过以下方法，但当用户单击时，它不会设置为Field。

<Field name="targetLocation" >
                    {({ field, form, meta }) => (
                    <div>
                        <input variant="outlined" id="searchTextField" fullWidth  
                            type="text" {...field} required label="Campaign Name"/>
                        {meta.touched &&
                        meta.error && <div className="error">{meta.error}</div>}
                    </div>
                    )}
                 </Field>

问题的演示-你会注意到只有一个输入被发送到数组。https://codesandbox.io/s/youthful-hofstadter-dp4mx?file=/src/App.js

Answer 1

在更新状态时同步GoogleAutoComplete组件时出现问题。因此，自动完成没有初始值。

以下是工作代码。

https://codesandbox.io/s/kind-monad-cz60f?file=/src/App.js