Question

这里我使用的是refs概念，每次单击提交按钮后，都会刷新页面，并且不显示任何控制台日志。 userId ,email,password正在获得未定义的值，这是什么问题

预先感谢

const emailRef = React.createRef();
const passwordRef = React.createRef();    

  const registerUser = () =>{
  const email = emailRef.current.value;
  const password = passwordRef.current.value;
  
  axios.post('/user/register',{userId,email,password})
  .then((response) => {
    console.log("response....",response)
  })
  .catch((err) => {
    console.log("err response", err)
  })
}


      <form className={classes.form} noValidate>
        <TextField
          ref = {emailRef }
          variant="outlined"
          id="email"
          label="Email Address"
          autoComplete="email"
          autoFocus
        />
        <TextField
          ref = {passwordRef } 
          label="Password"
          type="password"
          id="password"
          autoComplete="current-password"
        />
        <Button
          type="submit"
          color="primary"
          className={classes.submit}
          onClick = { registerUser }
        >
          Sign Up
        </Button>

Answer 1

切勿在没有任何正当理由的情况下使用createRef来访问真实的DOM。例如，我做了类似的表格，如您在此处获得的内容：

我开始这样的事情。

const LoginForm = () => {
  return (
    <form>
      <div className="form-group">
        <label htmlFor="Username">Username</label>
        <input
          type="Username"
          className="form-control"
          id="Username"
          placeholder="Username"
        />
      </div>
      <div className="form-group">
        <label htmlFor="Password">Password</label>
        <input
          type="password"
          className="form-control"
          id="Password"
          placeholder="Password"
        />
      </div>
      <button type="submit" className="btn btn-success">
        Submit
      </button>
    </form>
  );
};

使用useState添加了一个状态，因为它是一个功能组件：

const [values, setValues] = useState({
  username: "",
  password: ""
});

然后制作连接的组件，我将两者同时使用了此事件处理程序：

const handleChange = e => {
  // Here, e is the event.
  // e.target is our element.
  // All we need to do is to update the current state with the values here.
  setValues({
    ...values,
    [e.target.name]: e.target.value
  });
};

以这种方式将事件处理程序和值附加到两个输入上：

<div className="form-group">
  <label htmlFor="Username">Username</label>
  <input
    type="Username"
    className="form-control"
    id="Username"
    placeholder="Username"
    name="username"
    value={values.username}
    onChange={handleChange}
  />
</div>
<div className="form-group">
  <label htmlFor="Password">Password</label>
  <input
    type="password"
    className="form-control"
    id="Password"
    placeholder="Password"
    name="password"
    value={values.password}
    onChange={handleChange}
  />
</div>

最后，在提交表单期间，我从state或useState中获取了内容。

完整的工作应用程序：

const LoginForm = () => {
  const [values, setValues] = React.useState({
    username: "",
    password: ""
  });
  const handleChange = e => {
    // Here, e is the event.
    // e.target is our element.
    // All we need to do is to update the current state with the values here.
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = e => {
    e.preventDefault();
    console.log(values);
    // You'll get both the username and password.
  }
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="Username">Username</label>
        <input
          type="Username"
          className="form-control"
          id="Username"
          placeholder="Username"
          onChange={handleChange}
        />
      </div>
      <div className="form-group">
        <label htmlFor="Password">Password</label>
        <input
          type="password"
          className="form-control"
          id="Password"
          placeholder="Password"
          onChange={handleChange}
        />
      </div>
      <button type="submit" className="btn btn-success">
        Submit
      </button>
    </form>
  );
};

现在，使用您已获得的值，请使用该值使用Axios将其发送到服务器。同样，请勿使用createRef。

代码段

<div id="root"></div>
<style>.rate {border: 1px solid #f90; padding: 3px 5px; border-radius: 3px; font-weight: 600; background-color: #fc9; margin: 0 25px 0 5px;}</style>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
const LoginForm = () => {
  const [values, setValues] = React.useState({
    username: "",
    password: ""
  });
  const handleChange = e => {
    // Here, e is the event.
    // e.target is our element.
    // All we need to do is to update the current state with the values here.
    setValues({
      ...values,
      [e.target.name]: e.target.value
    });
  };
  const handleSubmit = e => {
    e.preventDefault();
    console.log(values);
    // You'll get both the username and password.
  }
  return (
    <form onSubmit={handleSubmit}>
      <div className="form-group">
        <label htmlFor="Username">Username</label>
        <input
          type="Username"
          className="form-control"
          id="Username"
          placeholder="Username"
          name="username"
          value={values.username}
          onChange={handleChange}
        />
      </div>
      <div className="form-group">
        <label htmlFor="Password">Password</label>
        <input
          type="password"
          className="form-control"
          id="Password"
          placeholder="Password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit" className="btn btn-success">
        Submit
      </button>
    </form>
  );
};
ReactDOM.render(
  <LoginForm />,
  document.getElementById('root')
);
</script>

此处有更多详细信息：Creating a full-stack MERN application using JWT authentication: Part 3。

Answer 2

由于在表单中使用提交按钮，因此应在表单元素上使用onSubmit处理程序，而不要在按钮上使用onClick。没有它，表单将被提交，因此页面将重新加载。

服务器端未显示响应

2 个答案: