reactjs - 从 react ref 调用 input click() 不起作用

Question

我想在提交之前触发表单字段的 HTML 验证（在此处输入电子邮件）。更准确地说是在失去焦点时。从我收集的信息来看，如果不提交表单就不可能触发内置验证，因此这是“hack”。我正在使用react 16.4.1和TypeScript。

这是代码：

构造函数：

private submitRef: React.RefObject<HTMLInputElement>;
public constructor(props: IProps) {
    super(props);
    this.submitRef = React.createRef();
}

render方法：

 <form onSubmit={this.handleSubmit} name="login">
     <input
         className="input"
         id="email"
         name="login.email"
         value={this.state.login.email}
         onChange={this.handleChange}
         placeholder="Email"
         type="email"
         onBlur={this.checkEmailValidity}
         required={true}
     />
     <input type="submit" value="Login" ref={this.submitRef} />
 </form>

checkEmailValidity方法：

@autobind
private checkEmailValidity(event: React.FormEvent<HTMLInputElement>) {
    if (!event.currentTarget.checkValidity()) {
        this.submitRef.current!.click();
    }
}

所以当失去焦点时，该checkEmailValidity方法被调用，并验证输入确实是无效的。我检查了对current元素的引用是否返回了正确的输入，但是在调用 时click()，什么也没有发生。我在这里做错了吗？

谢谢。

编辑：调用focus()输入虽然有效。