相关疑难解决方法(0)

如何在 Material UI Labs Autocomplete 中创建可点击的第一个选项

您可以在下面找到有关自动完成的 MUI 文档的示例,其中我在选项列表之前传递了一个指向 google 的链接。但是,我无法单击该选项,事件目标只是 MuiAutocomplete,而不是<a>我正在传递的。

import React from "react";
import TextField from "@material-ui/core/TextField";
import Paper from "@material-ui/core/Paper";

import Autocomplete from "@material-ui/lab/Autocomplete";

const Link = ({ children }) => (
  <Paper>
    <a href="https://www.google.com/" rel="nofollow" target="_blank">
      Go to Google
    </a>
    {children}
  </Paper>
);

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
      PaperComponent={Link}
    />
  );
}
Run Code Online (Sandbox Code Playgroud)

https://codesandbox.io/s/material-demo-egi6p

有趣的是,打开自动完成功能

    <Autocomplete
      open …
Run Code Online (Sandbox Code Playgroud)

autocomplete reactjs material-ui

4
推荐指数
1
解决办法
4749
查看次数

标签 统计

autocomplete ×1

material-ui ×1

reactjs ×1