Node.js 使用express的用户的基本post请求（React）

我有严重的问题，试图解决这个问题，任何帮助将不胜感激

所以我所要做的就是为用户进行一个简单的注册活动，在那里我可以让他们注册到这个网站上

我正在使用mssql和express

这是我的Register.js。我所需要的只是将输入到按钮中的详细信息传递到json主体，以便在我的server.js中使用它

Register.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>
    );
  }
}

我不知道如何通过server.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().

---

除非您有充分的理由使用它们，否则您应该尽量避免在react中使用

refs

（某些事情，如动画，需要强制控制）

React方法是以声明方式使用state执行操作，因此更改输入会更新关联的state字段，然后

onSubmit

函数从state获取值。大概是这样的：

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>
    );
  }
}

class AddUsers扩展React.Component{
构造函数（）{
超级（）；
this.state={users:[]，电子邮件：''，密码：'}；
this.onSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（e）{
e、 预防默认值（）；
const data={email:this.state.email，密码：this.state.password}；
获取（“/admin添加用户”{
方法：“POST”、//或“PUT”
标题：{
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（数据）
})
.then（response=>response.json（））
。然后（数据=>{
console.log（“成功：”，数据）；
})
.catch（错误=>{
控制台错误（“错误：”，错误）；
});
}
render（）{
console.log（this.state.users）；
返回(
this.setState（{email:e.target.value}）}/>
this.setState（{密码：e.target.value}）}/>
);
}
}

我已经尝试过了，但当添加数据时，它似乎什么都没做。控制台不显示任何内容，文本输入再次显示为空白。很抱歉，我忘了根据状态将值添加到输入中，我编辑了答案以显示此内容。添加这些值，它应该会像预期的那样工作。谢谢你，我现在就试试！那么server.js也应该正常工作了？这将不再允许文本输入到输入中。输入时，仅显示“[对象]”。这与按下什么键无关。我猜我输入错误，没有注意到您使用的是实际的DOM输入元素。在这种情况下，您需要从事件中提取值。我编辑了我的答案以便更好地解释。看看我是如何更改输入的onChange函数以使用事件的值的

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>
    );
  }
}