我在渲染函数中有一个简单的表单，如下所示:
render : function() {
return (
<form>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="button" onClick={this.handleLogin}>Login</button>
</form>
);
},
handleLogin: function() {
//How to access email and password here ?
}
我应该在我的handleLogin: function(){…}访问电子邮件和密码字段?
当前回答
提升用户体验;当用户单击提交按钮时，您可以尝试让表单首先显示发送消息。一旦我们收到来自服务器的响应，它就可以相应地更新消息。我们在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
其他回答
这可能会帮助Meteor (v1.3)的用户:
render: function() {
return (
<form onSubmit={this.submitForm.bind(this)}>
<input type="text" ref="email" placeholder="Email" />
<input type="password" ref="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
},
submitForm: function(e) {
e.preventDefault();
console.log( this.refs.email.value );
console.log( this.refs.password.value );
}
提升用户体验;当用户单击提交按钮时，您可以尝试让表单首先显示发送消息。一旦我们收到来自服务器的响应，它就可以相应地更新消息。我们在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
对付裁判的一个简单方法:
class UserInfo extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(e) { e.preventDefault(); const formData = {}; for (const field in this.refs) { formData[field] = this.refs[field].value; } console.log('-->', formData); } render() { return ( <div> <form onSubmit={this.handleSubmit}> <input ref="phone" className="phone" type='tel' name="phone"/> <input ref="email" className="email" type='tel' name="email"/> <input type="submit" value="Submit"/> </form> </div> ); } } export default UserInfo;
下面是从表单中获取数据的最短方法，也是使用FormData避免id和ref的最佳方法
import React, { Component } from 'react'
class FormComponent extends Component {
formSubmit = (event) => {
event.preventDefault()
var data = new FormData(event.target)
let formObject = Object.fromEntries(data.entries())
console.log(formObject)
}
render() {
return (
<div>
<form onSubmit={this.formSubmit}>
<label>Name</label>
<input name="name" placeholder="name" />
<label>Email</label>
<input type="email" name="email" />
<input type="submit" />
</form>
</div>
)
}
}
export default FormComponent
另一种方法是使用ref属性并使用this.refs引用值。这里有一个简单的例子:
render: function() {
return (<form onSubmit={this.submitForm}>
<input ref="theInput" />
</form>);
},
submitForm: function(e) {
e.preventDefault();
alert(React.findDOMNode(this.refs.theInput).value);
}
更多信息可以在React文档中找到: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
关于如何在React中使用单选按钮中描述的很多原因?这种方法并不总是最好的，但在一些简单的情况下确实是一种有用的替代方法。
