提升用户体验;当用户单击提交按钮时，您可以尝试让表单首先显示发送消息。一旦我们收到来自服务器的响应，它就可以相应地更新消息。我们在React中通过链接状态来实现这一点。参见下面的代码片段:

下面的方法进行第一次状态改变:

handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}

一旦React在屏幕上显示上面的发送消息，它就会调用将表单数据发送到服务器的方法:this.sendFormData()。为了简单起见，我添加了一个setTimeout来模拟这个过程。

sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() => { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}

在React中，this.setState()方法呈现一个具有新属性的组件。因此，您还可以在表单组件的render()方法中添加一些逻辑，这些逻辑将根据我们从服务器获得的响应类型而表现不同。例如:

render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = <div id="status" className={classString} ref="status">
                     {this.state.message}
                   </div>;
  }
return ( ...

codepen

像这样给你的输入参考

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

然后你可以像soo一样在你的handleLogin中访问它

handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}

我知道这个问题很老了，但我想到的最简单的解决方法是:

<form onSubmit={(e) => handleLogin(e)}>
   <input type="text" name="email" placeholder="Email" />
   <input type="password" name="password" placeholder="Password" />
   <button type="submit">Login</button>
</form>

你的handle函数:

const handleLogin = (e) => {
 e.preventDefault()
 const data = {
  email: e.target.elements.email.value,
  password: e.target.elements.password.value
 }
 console.log('FormData: ', data)
}

当你点击登录按钮时，你会在控制台看到如下格式的FormData: FormData:{电子邮件:'无论你在这里提示'，密码:'也无论你在这里提示'}。

E.target.elements.email.value目标具有特定名称的元素，在这里是电子邮件和密码。

在console.log在handllogin之后，你可以做一些验证逻辑和登录逻辑。

使用输入中的change事件来更新组件的状态，并在handllogin中访问它:

handleEmailChange: function(e) {
   this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
render : function() {
      return (
        <form>
          <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} />
          <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/>
          <button type="button" onClick={this.handleLogin}>Login</button>
        </form>);
},
handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
}

工作小提琴。

此外，阅读文档，有一个完整的部分专门用于表单处理:表单

以前你也可以使用React的双向数据绑定助手mixin来实现同样的事情，但现在它被弃用了，取而代之的是设置值和更改处理程序(如上所述):

var ExampleForm = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {email: '', password: ''};
  },
  handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
  },
  render: function() {
    return (
      <form>
        <input type="text" valueLink={this.linkState('email')} />
        <input type="password" valueLink={this.linkState('password')} />
        <button type="button" onClick={this.handleLogin}>Login</button>
      </form>
    );
  }
});

文档在这里:双向绑定助手。

从react中导入{useState}

导出默认函数App() { const [data, setData] = useState({})

const updateData = e => {
    setData({
        ...data,
        [e.target.name]: e.target.value
    })
}

const submit = e => {
    e.preventDefault()
    console.log(data)
}

return (
    <form onSubmit={submit}>
        <input
            name="email"
            type="email"
            onChange={updateData}
        />
        <input
            name="password"
            type="password"
            onChange={updateData}
         />
        <button>Submit</button>
    </form>
)

}

同样，这个也可以用。

handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    <form>
      <input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
      <input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
      <button type="button" onClick={this.handleLogin}>Login</button>
    </form>
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}