按下Enter React问题之后的Goto功能

Question

我不明白为什么按ENTER不会使我输入此功能。我应该如何写它？

其他onclick事件正常工作，但是当我尝试这样做时，它不起作用。

如何解决此问题？

 handleFormSubmit = (variant) => (e) => {
    e.preventDefault();
    const { activeStep, email } = this.state;
    if (activeStep === 4 && email === '') {
      document.getElementsByTagName('input').email.value = '';
      this.setState({
        error: <FormattedMessage {...messages.inputEmailAddressEmpty} />,
      });
      return;
    }
    this.Auth.isEmail(this.state.email).then((res) => {
      if (!res.isEmail) {
        this.Auth.register(
          this.state.login,
          this.state.password,
          this.state.name,
          this.state.surname,
          this.state.email,
        )
          .then((register) => {
            if (!register.error) {
              this.setState({
                activeStep: activeStep + 1,
              });
              this.props.enqueueSnackbar(<FormattedMessage {...messages.succesCreated} />, {
                variant,
              });
              this.props.history.replace('/login');
            } else {
              this.setState({
                error: <FormattedMessage {...messages.invalidEmail} />,
              });
            }
          })
          .catch(() => {
            this.setState({
              error: <FormattedMessage {...messages.errorServer} />,
            });
          });
      } else {
        this.setState({
          error: <FormattedMessage {...messages.existAccountWithSameEmail} />,
        });
      }
    });
  };
...

     <Fragment>
        <div className={classes.textField}><FormattedMessage {...messages.emailAddress} /></div>
        <FormattedMessage {...messages.inputEmail}>
          {(placeholder) => (
            <input
              key={5}
              className={classNames(classes.formItem, {
                [classes.formError]: error,
              })}
              placeholder={placeholder}
              name="email"
              type="text"
              onChange={this.handleChange}
              onKeyPress={(ev) => {
                if (ev.key === 'Enter') {
                  ev.preventDefault();
                  this.handleFormSubmit('success');
                }
              }}
            />
          )}
        </FormattedMessage>
        {error ? <div className={classes.textError}>{error}</div> : null}
      </Fragment>

我不明白为什么按Enter并不能使我输入此功能。我应该如何写它？

其他onclick事件正常工作，但是当我尝试这样做时，它不起作用。

如何解决此问题？

Answer 1

handleFormSubmit('success')返回函数。尝试这个

 onKeyPress={(ev) => {
     if (ev.key === 'Enter') {
          this.handleFormSubmit('success')(ev);
     }
 }}

Answer 2

使用ev.which或ev.keycode == 13