Reactjs 在“材质UI自动完成”中的文本字段输入上显示匹配的搜索选项数

我正在尝试自定义材质UI自动完成，并在用户搜索并在搜索框中输入字符串后，显示弹出式菜单中当前显示的选项计数（这是在您选择选项之前，它会变成一个

值
，很容易通过
值.length
获得计数）。当用户在
renderInput的
属性中输入按键时，我可能缺少该属性以获取整个选项数组中显示的选项数

下面是从Material UI示例文档中提取的一个示例，它是一个更好的代码起始集示例。使用
UseAutomplete
钩子非常简单，因为它公开了
groupedOptions
变量（即

下面是一个例子：

export default function UseAutocomplete() {
  const classes = useStyles();
  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions
  } = useAutocomplete({
    id: "use-autocomplete-demo",
    options: top100Films,
    getOptionLabel: (option) => option.title
  });

  return (
    <div>
      <div {...getRootProps()}>
        <label className={classes.label} {...getInputLabelProps()}>
          useAutocomplete
        </label>
        <input className={classes.input} {...getInputProps()} />
      </div>
      {groupedOptions.length > 0 ? (
        <>
          <div>
            Showing {groupedOptions.length} of {top100Films.length}
          </div>
          <ul className={classes.listbox} {...getListboxProps()}>
            {groupedOptions.map((option, index) => (
              <li {...getOptionProps({ option, index })}>{option.title}</li>
            ))}
          </ul>
        </>
      ) : null}
    </div>
  );
}

这是一个非常棒的解决方案，对如何实现这一目标进行了非常深入的解释！谢谢你Ryan:）如果top100Films数组不是在我们创建
NumResultsHeader
的同一文件中定义的，我如何访问top100Films/要在{top100Films.length}
的
显示{countRef}中显示的选项数？我试着通过，但我的长度=未定义up@user10782250我建议你创建一个新的问题，用一个代码沙盒重现你遇到的问题。啊，谢谢！下面是将选项数组与组合框
文件/组件分离时出现的问题的代码沙盒。在这里的示例中：，我将ComboBox导入到我的
App.js
文件中，并通过道具传递选项。@user10782250当前没有任何好的方法来处理此问题，但我记录了一个有关此问题的问题：。我认为v5可能会以某种方式支持这一点，但离稳定发布还有几个月的时间。
export default function UseAutocomplete() {
  const classes = useStyles();
  const {
    getRootProps,
    getInputLabelProps,
    getInputProps,
    getListboxProps,
    getOptionProps,
    groupedOptions
  } = useAutocomplete({
    id: "use-autocomplete-demo",
    options: top100Films,
    getOptionLabel: (option) => option.title
  });

  return (
    <div>
      <div {...getRootProps()}>
        <label className={classes.label} {...getInputLabelProps()}>
          useAutocomplete
        </label>
        <input className={classes.input} {...getInputProps()} />
      </div>
      {groupedOptions.length > 0 ? (
        <>
          <div>
            Showing {groupedOptions.length} of {top100Films.length}
          </div>
          <ul className={classes.listbox} {...getListboxProps()}>
            {groupedOptions.map((option, index) => (
              <li {...getOptionProps({ option, index })}>{option.title}</li>
            ))}
          </ul>
        </>
      ) : null}
    </div>
  );
}

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Paper from "@material-ui/core/Paper";

const NumResultsHeader = ({ children, ...other }) => {
  const headerRef = React.useRef();
  const countRef = React.useRef();
  const paperRef = React.useRef();
  React.useEffect(() => {
    const numOptions = paperRef.current.querySelectorAll(
      "li[data-option-index]"
    ).length;
    countRef.current.innerHTML = numOptions;
    if (numOptions > 0) {
      headerRef.current.style.display = "block";
    } else {
      headerRef.current.style.display = "none";
    }
  });
  return (
    <>
      <div ref={headerRef} style={{ display: "none" }}>
        Showing <span ref={countRef}></span> of {top100Films.length}
      </div>
      <Paper {...other} ref={paperRef}>
        {children}
      </Paper>
    </>
  );
};
export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      PaperComponent={NumResultsHeader}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}