Basi c пост-запрос для пользователей, использующих express (React)

Question

У меня возникли серьезные проблемы при попытке решить эту проблему, и любая помощь будет принята с благодарностью.

Поэтому все, что я пытаюсь сделать, - это простая операция регистрации пользователей, где я смогу подписать их до сайте.

Я использую ms sql и express.

Это мой регистр. js. Все, что я хочу, это чтобы данные, вводимые в кнопки, передавались в тело json, чтобы его можно было использовать на моем сервере. js.

Регистрация. js

class AddUsers extends React.Component {
  constructor() {
    super();

    this.state = { users: [] };
    this.onSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = { email: this.ref.email, password: this.ref.password };
    // const data = { name: "", password: "" };

    fetch("/admin-Add-Users", {
      method: "POST", // or 'PUT'
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    })
      .then(response => response.json())
      .then(data => {
        console.log("Success:", data);
      })
      .catch(error => {
        console.error("Error:", error);
      });
  }

  render() {
    console.log(this.state.users);
    return (
      <div>
        <LoginForm></LoginForm>

        <form onSubmit={this.onSubmit}>
          <input type="text" placeholder="email" ref="email" />
          <input type="text" placeholder="password" ref="password" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

Это мой сервер. js (файл конфигурации работает). Здесь все, что я хочу, - чтобы ранее добавленные данные были сохранены в моей базе данных (SQL сервер).

app.post("/admin-Add-Users", function(req, res) {

  const { password, email } = req.body;

  var request = new sql.Request();

 // query to the database and get the records
    request.query( "insert into Login (email, password) values ('"+email+"','"+password+"')", function(err, recordset) {
      if (err) console.log(err);

  });
  res.send({ message: "Success" });
});

Я понятия не имею, как получить данные из входных данных, которые будут просто сохраняться через мой сервер. js. Пожалуйста, любая помощь или примеры приветствуются. Я новичок, чтобы реагировать, поэтому, пожалуйста, объясните, как мне пять лет.

Ошибка, которую я сейчас получаю

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method `isPropagationStopped` on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist().

Answer 1

Вы должны стараться избегать использования refs в реакции, если у вас нет веских причин использовать их (некоторые вещи, такие как анимация, должны обязательно контролироваться).

Способ React заключается в том, чтобы делать вещи декларативно с состоянием, поэтому изменение входа обновляет связанное поле состояния, а затем функция onSubmit принимает значения из состояния. Как то так:

class AddUsers extends React.Component {
  constructor() {
    super();

    this.state = { users: [], email: '', password: '' };
    this.onSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    const data = { email: this.state.email, password: this.state.password };

    fetch("/admin-Add-Users", {
      method: "POST", // or 'PUT'
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(data)
    })
      .then(response => response.json())
      .then(data => {
        console.log("Success:", data);
      })
      .catch(error => {
        console.error("Error:", error);
      });
  }

  render() {
    console.log(this.state.users);
    return (
      <div>
        <LoginForm></LoginForm>

        <form>
          <input type="text" placeholder="email" value={this.state.email} onChange={e => 
               this.setState({email: e.target.value})} />
          <input type="text" placeholder="password" value={this.state.password} onChange={e => 
              this.setState({password: e.target.value})} />
          <input type="submit" onPress={this.onSubmit} />
        </form>
      </div>
    );
  }
}