Question

我是React的新手，并且正在使用PRIMER React模板进行React项目。在登录页面中，代码如下。

const Signin = (props) => {
  const { classes } = props;
  return (
              <form>
                <TextField
                  id="username"
                  label="Username"
                  className={classes.textField}
                  fullWidth
                  margin="normal"
                />
                <TextField
                  id="password"
                  label="Password"
                  className={classes.textField}
                  type="password"
                  fullWidth
                  margin="normal"
                />
                <Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
              </form>
  );
}

我需要添加表单Submit事件处理程序。因此，我将代码添加如下。

const Signin = (props) => {
      const { classes } = props;

      this.handleSubmit = this.handleSubmit.bind(this);

        handleSubmit(event) {
          event.preventDefault();
          const data = new FormData(event.target);

          this.setState({
            res: data
          });
        console.log(this.state.res)
      }

      return (
                  <form onSubmit={this.handleSubmit}>
                    <TextField
                      id="username"
                      label="Username"
                      className={classes.textField}
                      fullWidth
                      margin="normal"
                    />
                    <TextField
                      id="password"
                      label="Password"
                      className={classes.textField}
                      type="password"
                      fullWidth
                      margin="normal"
                    />
                    <Button variant="raised" color="primary" fullWidth type="submit">Login</Button>
                  </form>
      );
    }

但这不起作用。我什至无法编译。这里有什么问题，我该如何管理事件处理程序？

Answer 1

我认为错误是因为您将常规函数/类语法与错误语法混合在一起。

记住箭头功能没有“ this”或调用上下文，因此您需要进行Panther提及的更改。一切顺利。

有关更多详细信息，请参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

实际上我看到您在组件中使用状态。

您必须将其转换为类，或者使用钩子

const [formRes, setformRes] = React.UseState();

handleSubmit(event) {
   event.preventDefault();
   const data = new FormData(event.target);

   setformRes(data)
   console.log(formRes)
}

Answer 2

您的组件是功能组件。因此，请执行以下操作并运行一次：

删除this.handleSubmit = this.handleSubmit.bind(this);
事件handleSubmit像const handleSubmit = (e) => {}一样放置或放置在组件外部，然后setState-使其成为类组件。仍然需要功能组件，使用钩子或在无状态组件中使用引用。
将<form onSubmit={this.handleSubmit}>更改为<form onSubmit={handleSubmit}>

如果您打算使用setState，则可以在这种情况下Signin使用类组件。将函数转换为类检查this。

在功能组件中，您可以这样定义ref：

 <input type='text' placeholder='Enter City Name'
    ref={ el => cityInput = el } />

在提交中，您可以得到它的值，例如：

cityInput.value

示例性真菌成分：

const MyComponent = (props) => {
  let cityInput

  const onSubmit = e => {
    e.preventDefault()

    let city = cityInput.value
    if (city) {
      console.log(city)
    }
  }

  return (
    <div>
      <form onSubmit={ onSubmit }>
        <div>
          <input type='text' placeholder='Enter City Name'
            ref={ el => cityInput = el } />
        </div>
        <div>
          <button>Go</button>
        </div>
      </form>
    </div>
  )
}

Demo

希望有帮助

Answer 3

使用类组件。
从Parent组件传递eventHandler函数。

功能组件应该返回一些JSX。如果您想做一些混乱的工作人员，班级的组件会更好！

如何在React中的const中添加事件处理程序？

3 个答案: