我应该为 Reactstrap Input Ref 使用什么打字稿类型？

Question

我正在将 ref 链接到 <Input> 元素，但无法获得正确的类型来将其定义为。目前我有这个：

const [location, setLocation] = useState<GeolocationPosition>();
  const [search, setSearch] = useState<string>('');
  
  const searchInputRef = useRef<HTMLInputElement>(null)

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(position => {
      setLocation(position);
    })
  }, [])

  const changeSearchHandler = () => {
    setSearch(searchInputRef.current!.value);
  }

  return (
    <>
      <Row>
        <Col className='header'>
          <h3 className='mt-3'>IsItOpen?</h3>
        </Col>
      </Row>
      <Row className='mt-4'>
        <Col lg={{ size: 6, order: 0, offset: 3}}>
          <Card>
            <CardHeader>
              <CardTitle>
                <Input type='text' ref={searchInputRef} onChange={changeSearchHandler} />
              </CardTitle>
            </CardHeader>
            <CardBody>
              Your results!
            </CardBody>
          </Card>
        </Col>
      </Row>
    </>
  );

错误来自 <Input> 行告诉我：

Type RefObject is not assignable to type LegacyRef

如果我将 ref 类型更改为 Input，那么我会在 setSearch 调用的 value 上收到错误消息：

Property "Value" does not exist on type Input

我不确定解决这个问题的正确方法是什么，我不想使用 any。

Answer 1

React-strap 提供了另一个属性，innerRef 让你访问底层的 <input />:

const searchInputRef = useRef<HTMLInputElement>(null);

const changeSearchHandler = () => {
  setSearch(searchInputRef.current!.value);
};

// ..

<Input
  type="text"
  innerRef={searchInputRef}
  onChange={changeSearchHandler}
/>

而 ref 允许您访问 react-strap 的 Input 组件。

我应该为 Reactstrap Input Ref 使用什么打字稿类型？

What typescript type should I use for Reactstrap Input Ref?

javascript

typescript

reactjs

reactstrap