如何在 React 的另一个组件中使用自定义下拉值？

如何解决如何在 React 的另一个组件中使用自定义下拉值？

嗨，我正在制作一个自定义下拉列表，我想在另一个组件上使用选定的值。使用默认的 html 下拉列表时，我可以通过在 onChange 处理程序中使用 event.target.value 来实现，但无法弄清楚如何使用自定义下拉列表实现相同的效果。

const dropDownValues = options.map((options) => {
    return (
      <li
        key={options.key}
        onClick={() => setSelection({ isOpen: false,selected: options.value })}
        onChange={changed}
        value={options.value}
      >
        {options.text}
      </li>
    );
  });

这是我想使用它的地方：

const Table = <T extends object>({
  ...
  
const [rowLength,setrowLength] = useState(showPages ? 5 : data.length);

...

  const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
    setoffset(0);
    setrowLength(parseInt(event.target.value));
  };

const options = [
    { key: 5,value: 5,text: 5 },{ key: 10,value: 10,text: 10 },{ key: 15,value: 15,text: 15 },{ key: 20,value: 20,text: 20 },];
  return (
    <StyledTable shrink={showPages}>
      <table>
        <thead>
          <tr>{tableHeader}</tr>
        </thead>
        <tbody>{tableBody}</tbody>
      </table>
      <div>
        <label>Rows per page:</label>
        {/* <select onChange={onChange}>
          <option value="5">5</option>
          <option value="10">10</option>
          <option value="15">15</option>
          <option value="20">20</option>
        </select> */}
        <Dropdown options={options} changed={onChange} />
...
    </StyledTable>
  );
};

这就是我尝试使用它的方式...我保留了默认的 html 下拉菜单以供参考并按预期工作，我想获得相同的结果，但使用我自己的下拉菜单。谢谢。