制作 Material-ui 自动完成组件可点击链接的选项？

Question

import React, { useEffect, useRef } from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function FreeSolo(props) {
  const [vendors, setVendors] = React.useState([]);
  const [value, setValue] = React.useState();
  const nameRef = useRef();
  useEffect(() => {
    sendDataToParent();
  }, [value]);

  const sendDataToParent = async () => {
    await props.parentFunction(value);
  };
  return (
    <div style={{}}>
      <Autocomplete
        freeSolo
        id="free-solo-2-demo"
        options={props.vendorData.map((option) => option.name)}
        renderInput={(params) => (
          <TextField
            {...params}
            value={value}
            required
            inputRef={nameRef}
            onChange={(e) => {
              setValue(e.target.value);
              sendDataToParent();
            }}
            label="Vendor Name"
            margin="normal"
            variant="standard"
            InputProps={{ ...params.InputProps, type: "search" }}
          />
        )}
      />
    </div>
  );
}

我尝试使用 renderOption 来实现，但无法正常工作。我需要将选项设置为可点击的链接，这样每当用户选择选项时，他就会被重定向到链接。

编辑：使用 renderOption 解决

renderOption={(option) => (
          <React.Fragment>
            <span
              style={{ cursor: "pointer" }}
              onClick={() => {
                window.location.href = `/allvendors/${option.id}`;
              }}
            >
              {option.name} - Click to visit the Vendor
            </span>
          </React.Fragment>
        )}

Answer 1

您可以使用Autocomplete 组件的onChange 属性重定向到链接，而不是使选项可点击链接。

我假设您的vendorData 中的每个选项都有一个name 和一个link，例如

{
  name: "Google",
  link: "https://www.google.com"
}

为了能够在Autocomplete 组件的onChange 中访问此对象的链接，您需要更改options 映射函数以返回整个option。在此更改之后，如果您尝试单击打开下拉菜单，则会引发错误，因为选项标签需要是 string（例如选项名称）而不是对象（例如选项）。因此，我们需要添加 getOptionLabel 属性并返回 option.name。

最后，在onChange 函数中，我们将window.location.href 设置为等于option.link，这会将当前页面的URL 更改为链接并将用户定向到该链接。

<div style={{}}>
  <Autocomplete
    freeSolo
    id="free-solo-2-demo"
    getOptionLabel={(option) => option.name}
    options={props.vendorData.map((option) => option)}
    onChange={(event: any, option: any) => {
      window.location.href = option.link;
    }}
    renderInput={(params) => (
      <TextField
        {...params}
        value={value}
        required
        inputRef={nameRef}
        onChange={(e) => {
          setValue(e.target.value);
          sendDataToParent();
        }}
        label="Vendor Name"
        margin="normal"
        variant="standard"
        InputProps={{ ...params.InputProps, type: "search" }}
      />
    )}
  />
</div>