如何在Material UI Labs自动完成中创建可点击的第一个选项 [英] How can I create a clickable first option in Material UI Labs Autocomplete

问题描述

下面您可以从自动完成的MUI文档中找到一个示例，在该示例中，我已经在选项列表之前将链接传递给了google.但是，我无法单击该选项，事件目标只是MuiAutocomplete，而不是我要传递的<a>.

Below you can find an example from the MUI docs on Autocomplete where I've passed a link to google, prior to the options list. However, I can't click that option, the event target is just the MuiAutocomplete, rather than the <a> I'm passing.

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

有趣的是，开放给自动完成功能

Interestingly, passing open to the autocomplete

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

允许它按预期工作.

当前，我正在使用onMouseDown来完成这项工作，但觉得这可能是一个不好的解决方案.

Currently, I'm using a onMouseDown to make this work but feel this is possibly a bad solution.

推荐答案

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

You can fix this by adding:

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

链接到您的链接，以便您的Link组件看起来像:

to your link so that your Link component looks like:

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组件将道具传递给控制其位置的Paper组件，因此如果不进行此更改，则定位将是错误的.

A separate fix that I've included is passing through any additional props to the Paper component (via ...other). The Popper component passes props to the Paper component that control its positioning, so the positioning will be incorrect without this change.

之所以需要event.preventDefault()，是因为重点在于单击之前的输入.鼠标按下时的默认效果之一是将焦点从输入更改为链接.

The reason why event.preventDefault() is necessary, is because the focus is on the input prior to the click. One of the default effects of the mouse-down would be to change focus from the input to the link. The onBlur of the input would trigger a close of the listbox portion of the Autocomplete which means the link would no longer be present and it would not continue on to the onClick behavior of the link. Calling event.preventDefault() prevents the focus change from occurring.

这篇关于如何在Material UI Labs自动完成中创建可点击的第一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！