Question

我使用forwardRef具有以下受控组件。我想在组件ref上公开两个自定义函数，并输入了界面的形状：

interface SearchProps {
  onChange: (event) => void;
}

interface SearchRef {
  clear: () => void;
  focus: () => void;
}

const SearchInput = forwardRef<SearchRef, SearchProps>(({ onChange }, ref) => {
  const inputRef = useRef<HTMLInputElement>();
  const [inputValue, setInputValue] = useState('');

  useImperativeHandle(ref, () => ({
    clear: () => console.log('clear!'),
    focus: () => console.log('focus!')
   })
  );

  return (
    <InputText 
      ref={inputRef}
      onChange={
        useCallback(e => {
          setInputValue(e.currentTarget.value);
          onChange(e.currentTarget.value);
        }, [setInputValue, onChange])
      }
    />
  );
});

现在此代码给我以下错误：

SyntaxError: ... Unexpected token, expected ";"

基本上说它不喜欢这个forwardRef<SearchInput, SearchProps>，由于某种原因，该行的结尾>上出现了“意外令牌”

但是，如果我删除了useImperativeHandle块，那么我将不再收到此错误-我完全迷失了，为什么我得到此语法错误？与我定义SearchRef接口的方式有关吗？这不是一个真正有用或描述性的错误，所以我完全不确定该如何处理。任何帮助将不胜感激！

使用useImperativeHandle挂钩输入反应引用时出现语法错误

0 个答案: