javascript - 使用 React 的 useRef 钩子处理 onKeyDown 事件

Question

我第一次使用useRefand的经验forwardRef。我已经得到了一些关于潜在解决方案的提示，但我还有一段路要走，但是该组件很小而且相当简单。

我想要做的是useRef用来传递一个handleOnKeyDown函数的结果，它基本上是在寻找一个keyCode 13（键盘上的“Enter”），然后findGoodsBtnRef通过将它向下传递到CcceAttribute组件中来“单击”ref={findGoodsBtn}

我知道我目前所拥有的东西是不正确的（因为它不起作用）并且我的编辑抱怨我ForwardRef在第一行使用了，任何人都可以建议我在尝试实施这个解决方案时可能会出错的地方吗？TIA

const CommodityCodeLookupAttribute = forwardRef<Props, typeof CcceAttribute>(
  ({ attribute: productLookupAttribute, onChange, ...props }: ref) => {   

  const { object } = useFormObjectContext();

  const ccceAttribute = object.attributeCollection.find(isCcceResultAttribute);

  if (!ccceAttribute) {
    return null;
  }

  const findsGoodsBtnRef = React.useRef();
  const findGoodsBtn = findsGoodsBtnRef.current;


  const handleOnKeyDown = (event) => {
    if (event.keyCode === "13") {
      // event.preventDefault();
      console.log("Default prevented");
      findsGoodsBtnRef.current.click();
      // use the ref that points to the ccce attribute button -> click()
    }
  };

  return (
    <>
      <StringAttributeDefault
        attribute={productLookupAttribute}
        onKeyDown={handleOnKeyDown}
        {...otherProps}
      />
      <CcceAttribute attribute={ccceAttribute} ref={findGoodsBtn} />
    </>
  );
};