Google 个地点（多个）

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 自动完成 - 虽然它可以工作但不允许我 select 由于自动完成需要选项的位置，并且没有它是行不通的。我想知道让多个位置工作的更好方法是什么。

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

问题演示 - 您会注意到只有 1 个输入被发送到数组。 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

Google 个地点（多个）

Google Places (multiple)

reactjs

autocomplete

material-ui

google-places-api