时间戳

首页 > 解决方案 > 如何在自动完成组件（材质 UI）中的选项上添加 onClick 事件？

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

问题描述

如何在选项上添加 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)}
                  />
                );
              }}
            />

标签： reactjsautocompletematerial-ui

解决方案

您需要在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" />
      )}
    />

这是我创建的一个示例。当组件中的onChange函数Autocomplete被触发时，它会在控制台上显示值。根据文档，这里的 onchange 函数传递了三个名为event,value和reason.

推荐阅读