在带有类型脚本的React中使用ref

时间:2019-07-01 06:29:46

标签: reactjs typescript ref umijs

我正在将umi.js与打字稿一起使用。我想在React中使用ref来获取输入信息。我成功运行了它,但是vscode显示来自打字稿的一些错误。

我在React中使用useRef来获取输入值。而且我正在使用无状态组件。

这是我的代码:


const Username = useRef();
function getinfo() {
    console.log(Username.current.state.value);    
}
return (
    <div className={styles.normal}>
      <div className={styles.welcome} />
      <h1>xxxx</h1>
      <h1 className={styles.title}>login</h1>
      <ul className={styles.list}>
        <li><label>username:</label><Input ref={Username} className={styles.input} onChange={handleUsername} placeholder="username"/></li>
        <li><label>password:</label><Input.Password className={styles.input} onChange={handlePassword} placeholder="password"/></li>
        <li>
          <Button type="primary" shape="round" onClick={handleClick}>login</Button>
          <Button type="primary" shape="round" onClick={getinfo}>get info</Button>
        </li>
      </ul>
    </div>
  );

有两个错误: 1.在函数getinfo中,它表明Username.current可能未定义。 2. ref显示无法将MutableRefObject赋予字符串。 也许我不能使用useRef?但是,如果我不使用它,而是使用“ ref [Username]”获取Username的值,则会出现错误“无法获取参考”

0 个答案:

没有答案