如何使材质 ui 自动完成组件可点击链接的选项？答案

【问题标题】：How to make options of material ui autocomplete component clickable links?如何使材质 ui 自动完成组件可点击链接的选项？
【发布时间】：2021-03-20 12:58:38
【问题描述】：

自动完成选项具有通过良好的 Read Api 调用获取的图书标题。我希望每本书的标题都是可点击的链接，并且应该转到另一个页面

`     <Autocomplete
          id="combo-box-demo"
          options={bookData}// bookData has titles of book fetched from good reads api
          getOptionLabel={(option) => option.title}enter code here
           style={{ width: 300 }}
          renderInput={(params) => <TextField {...params} label="Combo box" variant="outlined"   
      onChange={handleChange}/>}
    />`

【问题讨论】：

标签： reactjs autocomplete material-ui options

【解决方案1】：

只需为自动完成提供一个渲染选项。

见Autocomplete API

这是一个工作代码，请参阅 renderOption 属性。

  <Autocomplete
    id="autocmplete-clickable"
    style={{ width: 300 }}
    options={options}
    classes={{
      option: classes.option
    }}
    autoHighlight
    getOptionLabel={(option) => option.label}
    renderOption={(option) => (
      <React.Fragment>
        <span
          style={{ cursor: "pointer" }}
          onClick={() => {
            window.location.href = option.link;
          }}
        >
          Clickable link {option.label} {option.code}
        </span>
      </React.Fragment>
    )}
    renderInput={(params) => (
      <TextField
        {...params}
        label="Choose a country"
        variant="outlined"
        inputProps={{
          ...params.inputProps,
          autoComplete: "new-password" // disable autocomplete and autofill
        }}
      />
    )}
  />

其中 options 只是您定义的对象数组。

const options = [
  { label: "Thais", phone: "376", link: "https://google.com" },
  { label: "Jessica", link: "https://stackoverflow.com" },
  { label: "Kika", link: "https://slovakia.com" },
  { code: "DVL", label: "David Vendel", phone: "1-268", link: "https://davidvendel.com"}
];

Codesandbox

【讨论】：

点击任何选项后，我应该在哪里提供要引用的页面链接
要么链接给定选项的对象，要么将其硬编码为 renderOption 代码。