Блог

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

Вместо того, чтобы делать ссылки на опции кликабельными, вы можете перенаправить на ссылку, используя onChange реквизит Autocomplete компонента.

Я предполагаю, что у каждого варианта в вашем 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>