反应式下拉列表

import React, { useState } from 'react';

const DropdownList = ({ options }) => {
  const [inputValue, setInputValue] = useState('');
  const [filteredOptions, setFilteredOptions] = useState(options);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    const filtered = options.filter(option => option.includes(value));
    setFilteredOptions(filtered);
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <ul>
        {filteredOptions.map((option, index) => (
          <li key={index}>{option}</li>
        ))}
      </ul>
    </div>
  );
};

export default DropdownList;

import React, { useState } from 'react';
import { FixedSizeList as List } from 'react-window';

const DropdownList = ({ options }) => {
  const [inputValue, setInputValue] = useState('');
  const [filteredOptions, setFilteredOptions] = useState(options);

  const handleInputChange = (event) => {
    const value = event.target.value;
    setInputValue(value);
    const filtered = options.filter(option => option.includes(value));
    setFilteredOptions(filtered);
  };

  const Row = ({ index, style }) => (
    <div style={style}>
      {filteredOptions[index]}
    </div>
  );

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      <List
        height={200}
        itemCount={filteredOptions.length}
        itemSize={35}
        width={300}
      >
        {Row}
      </List>
    </div>
  );
};

export default DropdownList;