如何在 Material UI 实验室自动完成中创建可点击的第一个选项

Question

您可以在下面找到有关自动完成的 MUI 文档中的示例，其中我在选项列表之前将 link 传递给 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}
    />
  );
}

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

有趣的是，通过 open 自动完成

    <Autocomplete
      open // add this prop
      id="combo-box-demo"
      options={top100Films}

允许它按预期工作。

目前，我正在使用 onMouseDown 来完成这项工作，但我觉得这可能是一个糟糕的解决方案。

Answer 1

您可以通过添加以下内容来解决此问题：

      onMouseDown={event => {
        event.preventDefault();
      }}

到您的 link 以便您的 Link 组件看起来像：

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

我包含的一个单独的修复是将任何额外的道具传递给 Paper 组件（通过 ...other）。 Popper 组件 passes props 到控制其定位的 Paper 组件，因此如果不进行此更改，定位将不正确。

之所以需要 event.preventDefault()，是因为焦点在点击之前的输入上。鼠标按下的默认效果之一是将焦点从输入更改为 link。 onBlur of the input 将触发 Autocomplete 的列表框部分的关闭，这意味着 link 将不再存在并且不会继续 onClick 的行为link。调用 event.preventDefault() 可防止发生焦点更改。

如何在 Material UI 实验室自动完成中创建可点击的第一个选项

How can I create a clickable first option in Material UI Labs Autocomplete

autocomplete

reactjs

material-ui