如何在自动完成组件（Material UI）的选项上添加onClick事件？

Question

如何在选项上添加 onClick 事件 - 我的意思是当您单击所选选项时我想链接到某个地方，而不是仅仅放入搜索字段（或文本字段）？我在网上非常努力地搜索，但我就是找不到如何做到这一点。

            <Autocomplete
              freeSolo
              classes={classes}
              options={searchItems}
              getOptionLabel={(option) =>
                option.title ? option.title : option.name
              }
              style={{ width: 300, borderRight: "none", borderLeft: "none" }}
              renderInput={(params) => {
                return (
                  <TextField
                    {...params}
                    variant="outlined"
                    fullWidth
                    placeholder="Search for movie, tv or person"
                    value={value}
                    onChange={(e) => handleChange(e)}
                  />
                );
              }}
            />

Answer 1

您需要将 onChange 函数移动到

Autocomplete

组件内，如下所示：

<Autocomplete
      id="combo-box-demo"
      classes={classes}
      options={searchItems}
      getOptionLabel={(option) =>
            option.title ? option.title : option.name
          }
      style={{ width: 300, borderRight: "none", borderLeft: "none" }}
      onChange={(e, value) => console.log(e.target, value.title)}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />

这是我创建的一个示例。当

onChange

组件中的

Autocomplete

函数被触发时，它会在控制台上显示值。根据文档，这里的 onchange 函数传递了三个名为

event

、

value

和

reason

的道具。

Answer 2

自动完成不提供

onClick

回调。唯一且简单的方法是用 Box 组件包装 Autocomplete。

   <Box
        onClick={() => {
          console.log('clicked');
        }}>
        <Autocomplete
          id={id}