Reactjs 使物料界面选项自动完成组件可点击链接？ import React，{useffect，useRef}来自“React”； 从“@material ui/core/TextField”导入TextField； 从“@material ui/lab/Autocomplete”导入自动完成； 导出默认函数FreeSolo（道具）{ const[vendors，setVendors]=React.useState（[]）； const[value，setValue]=React.useState（）； const nameRef=useRef（）； useffect（（）=>{ sendDataToParent（）； }，[价值]； const sendDataToParent=async（）=>{ 等待道具。父函数（值）； }; 返回( 选项（名称）} renderInput={（参数）=>( { 设定值（即目标值）； sendDataToParent（）； }} label=“供应商名称” margin=“正常” variant=“标准” InputProps={……params.InputProps，键入：“search”} /> )} /> ); }

我尝试使用渲染来完成它，但无法让它工作。我需要有可点击的链接选项，这样每当用户选择的选项，他是重定向到链接

编辑：使用渲染解决

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={（选项）=>(
{
window.location.href=`/allvendors/${option.id}`；
}}
>
{option.name}-单击以访问供应商
)}

您可以使用

Autocomplete

组件的

onChange

属性重定向到链接，而不是使选项成为可点击链接

我假设您的

供应商数据中的每个选项都有
名称和
链接，例如

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

为了能够在
自动完成
组件的
onChange
中从此对象访问链接，您需要更改
选项
映射函数以返回整个
选项
。更改后，如果您尝试单击打开下拉列表，它将抛出错误，因为选项标签需要是
字符串（例如选项名称），而不是对象（例如选项）。因此，我们需要添加
getOptionLabel
prop并返回
选项.name

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

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


option.name}
options={props.vendorData.map（（option）=>option）}
onChange={（事件：任意，选项：任意）=>{
window.location.href=option.link；
}}
renderInput={（参数）=>(
{
设定值（即目标值）；
sendDataToParent（）；
}}
label=“供应商名称”
margin=“正常”
variant=“标准”
InputProps={……params.InputProps，键入：“search”}
/>
)}
/>
非常感谢您对getOptionLabel和options的澄清。欢迎@HuzaifaMalik
<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>