onSubmit问题与react和tsx中的表单

时间:2018-12-06 11:16:37

标签: reactjs typescript

我正在考虑用react +打字稿制作表格。

它应该只有一个用户名和密码。

我的代码如下

export default () => {
    const [username, updateUsername] = useState('');

    // I managed to figure out the part below:
    const updateUsername = (e: React.FormEvent<HTMLInputElement>): void => {
      setUsername(username: e.currentTarget.value);
    };

    const printValues = e => {
       e.preventDefault();
       console.log(e.currentTarget.value);
    }

    // cannot figure out what is wrong with onSubmit
    return (
        <form onSubmit={printValues}>
            <label>Username</label>
            <input 
                type='text'
                name='username'
                value={username}
                onChange={updateUsername}
            />
            <input type='submit' />
        </form>
    );
  }

我看到以下错误:

enter image description here

1 个答案:

答案 0 :(得分:1)

如建议所述, 将React.FormEvent<HTMLInputElement>更改为React.FormEvent<HTMLFormElement>,它应该可以工作。