Блог

Главная - Вопросы по программированию - Ответ не отображается со стороны сервера

Ответ не отображается со стороны сервера

#reactjs

#reactjs

Вопрос:

Здесь я использую концепцию ссылок, после нажатия на кнопку отправки каждый раз, когда она обновляет страницу и не показывает никаких журналов консоли. 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>

Комментарии:

1. Любая причина для использования createRef()..

2. Кроме того, @simran, убедитесь, что вы принимаете ответы на все предыдущие вопросы, которые вы задавали. Возможно, вы не получаете хороших ответов или не сможете задавать вопросы в будущем. Мы сообщество, и нам нужно помогать друг другу, оценивая наши усилия.

3. @PraveenKumarPurushothaman вы правы, это оттолкнет сообщество от помощи таким пользователям, лично у меня есть список людей, которые не принимают ответ или, по крайней мере, не оставляют отзыв после опробования ответов. Я вижу, что ответ, подобный тому, который вы опубликовали ниже, требует драгоценного времени для его создания, и тогда вы не получите никакой обратной связи или какой-либо оценки

4. Спасибо за поддержку @BoussadjraBrahim.

5. Добро пожаловать, мой брат

Ответ №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>

Более подробная информация здесь: Создание полнотекстового приложения MERN с использованием аутентификации JWT: часть 3.

Ответ №2:

Поскольку вы используете кнопку отправки в форме, вы должны использовать onSubmit обработчик для элемента формы, а не onClick для кнопки. Без этого форма отправляется и, следовательно, страница перезагружается.