在Reactjs中获取表单数据
我的renderfunction有一个简单的forms，如下所示：
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() { ... }来访问Email和Password字段？
使用input上的change事件更新组件的状态并在handleLogin访问它：
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); }
工作小提琴： http : //jsfiddle.net/kTu3a/
另外，阅读文档，有一个专门的表单处理的整个部分： http : //facebook.github.io/react/docs/forms.html
以前，您也可以使用React的双向数据绑定帮助器mixin来实现相同的function，但是现在不推荐使用它来设置值和更改处理程序（如上所述）：
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> ); } });
文档在这里： http : //facebook.github.io/react/docs/two-way-binding-helpers.html
另一种方法是使用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文档中find： https ： //facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute
React中的单选button有很多原因。 这种方法并不总是最好的，但是在一些简单的情况下它确实是一个有用的select。
一个简单的方法来处理裁判：
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;
我会build议采取以下方法：
import {Autobind} from 'es-decorators'; export class Form extends Component { @Autobind handleChange(e) { this.setState({[e.target.name]: e.target.value}); } @Autobind add(e) { e.preventDefault(); this.collection.add(this.state); this.refs.form.reset(); } shouldComponentUpdate() { return false; } render() { return ( <form onSubmit={this.add} ref="form"> <input type="text" name="desination" onChange={this.handleChange}/> <input type="date" name="startDate" onChange={this.handleChange}/> <input type="date" name="endDate" onChange={this.handleChange}/> <textarea name="description" onChange={this.handleChange}/> <button type="submit">Add</button> </form> ) } }
这可能有助于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 ); }
如果您在项目中使用Redux，则可以考虑使用此更高级别的组件https://github.com/erikras/redux-form 。
改善用户体验; 当用户点击提交button时，您可以尝试获取表单以首先显示发送消息。 一旦我们收到服务器的响应，就可以相应地更新消息。 我们通过链接状态在React中实现这一点。 请参阅下面的codepen或摘录：
以下方法会使第一个状态更改：
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（）方法中添加一些逻辑，这些方法的行为将取决于从服务器获取的响应types。 例如：
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
要么
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); }
在JavaScript中的许多事件中，我们有一个event给出一个对象，包括发生了什么事件，值是什么等等。
这就是我们在ReactJs中使用的forms
所以在你的代码中，你将状态设置为新的值，例如：
class UserInfo extends React.Component { constructor(props) { super(props); this.handleLogin = this.handleLogin.bind(this); } handleLogin(e) { e.preventDefault(); for (const field in this.refs) { this.setState({this.refs[field]: this.refs[field].value}); } } render() { return ( <div> <form onSubmit={this.handleLogin}> <input ref="email" type="text" name="email" placeholder="Email" /> <input ref="password" type="password" name="password" placeholder="Password" /> <button type="button">Login</button> </form> </div> ); } } export default UserInfo;
这也是React v.16中的表单示例，就像您在将来创build的表单一样：
class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } handleSubmit(event) { alert('A name was submitted: ' + this.state.value); event.preventDefault(); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } }
