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

【问题标题】：How to add onClick event on the options in Autocomplete Component(Material UI)?如何在自动完成组件（材质 UI）中的选项上添加 onClick 事件？
【发布时间】：2021-06-05 17:36:58
【问题描述】：

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

            <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)}
                  />
                );
              }}
            />

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

您需要将Autocomplete组件内的onChange函数移动如下：

<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" />
      )}
    />

Here is an example 我创建的。当Autocomplete 组件中的onChange 函数被触发时，它会在控制台上显示值。根据文档，这里的 onchange 函数传递了三个名为 event、value 和 reason 的道具。

【讨论】：