搜索按钮以激活自动完成谷歌地图地点（React.js）

Question

我正在使用材料/用户界面中的“自动完成”按钮来搜索 Google 地图位置。一切正常，所以当用户点击自动完成中提供的字段时，它会将他带到下一页。

我的问题是：如果用户点击按钮，是否可以将搜索按钮添加到活动自动完成功能？

这是自动完成的代码，我添加了按钮，但如果有人点击它，仍然没有任何反应。

<div className="search">
        <Autocomplete
          id="google-map-demo"
          key={reset}
          ListboxProps={{ style: { maxHeight: 400, overflow: 'auto',fontSize:'0.7rem' } }}
          getOptionLabel={(option) =>
            typeof option === "string" ? option : option.description
          }
          
          filterOptions={(x) => x}
          options={options}
          onChange={(e, l) => {
            customer.setMyaddress(l.description);
            getMyDestination(l.place_id);
          }}
          renderInput={(params) => (
            <TextField
             
              {...params}
              className={classes.root} 
              variant="standard"
              fullWidth
              onChange={(e, v) => {
                setInputValue(e.target.value);
              }}
            />
          )}
          renderOption={(option) => {
            const matches =
              option.structured_formatting.main_text_matched_substrings;
            const parts = parse(
              option.structured_formatting.main_text,
              matches.map((match) => [
                match.offset,
                match.offset + match.length,
              ])
            );

            return (
              <Grid container alignItems="center">
                <Grid item>
                  <LocationOnIcon className={classes.icon} />
                </Grid>
                <Grid item xs>
                  {parts.map((part, index) => (
                    <span
                      key={index}
                      style={{ fontWeight: part.highlight ? 700 : 400 }}
                    >
                      {part.text}
                    </span>
                  ))}

                  <Typography variant="body2" color="red" className={classes.noOptions} >
                    {option.structured_formatting.secondary_text}
                  </Typography>
                </Grid>
              </Grid>
            );
          }}
        />
                <button className="btn btn-primary" style={{position: "absolute",
    right: "0"}}
              onClick={(e, v) => {
                setInputValue(e.target.value);
              }}>Find</button>
</div>

任何人都知道如何解决这个问题，所以当点击按钮时，我得到的结果与点击自动完成字段的结果相同？ 谢谢

Answer 1

您使用 Autocomplete 中的 open 道具，我已经从 material-ui 中分叉了 Autocomplete 示例，请查看： https://codesandbox.io/s/material-demo-forked-3n5lw?file=/demo.js