制作 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 来实现，但无法正常工作。我需要有可点击的选项 links 以便每当用户选择选项时，他都会被重定向到 link.

编辑：使用 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 属性重定向到 link，而不是使选项可点击 link。

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

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

为了能够从 Autocomplete 组件的 onChange 中的这个对象访问 link，您需要将 options 映射函数更改为 return整个option。进行此更改后，如果您尝试单击以打开下拉列表，则会抛出错误，因为选项标签需要是 string（例如选项名称）而不是对象（例如选项）。所以，我们需要添加 getOptionLabel 属性和 return option.name.

最后，在 onChange 函数中，我们将 window.location.href 设置为 option.link，这会将当前页面的 URL 更改为 link并将用户引导至 link.

<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>

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

Make options of Material-ui autocomplete component clickable links?

reactjs

hyperlink

autocomplete

material-ui