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

Posted 2023-03-23

【中文标题】我应该为 Reactstrap Input Ref 使用啥打字稿类型？

【英文标题】：What typescript type should I use for Reactstrap Input Ref?我应该为 Reactstrap Input Ref 使用什么打字稿类型？

【发布时间】：2021-07-06 19:08:13

【问题描述】：

我将 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> 告诉我的行：

类型 RefObject 不能分配给类型 LegacyRef

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

输入类型上不存在属性“值”

我不确定正确的方法是什么，我不想使用any。

【参考方案1】：

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

const searchInputRef = useRef<HTMLInputElement>(null);

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

// ..

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

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