获取ReactJS格式的表单数据
获取ReactJS格式的表单数据
提问于 2014-05-02 19:45:06
我的render函数中有一个简单的表单，如下所示：
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 ?
}要访问Email和Password字段，我应该在handleLogin: function() { ... }中写入什么？
回答 20
Stack Overflow用户
回答已采纳
发布于 2014-05-02 20:45:42
使用输入上的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);
}工作fiddle。
此外，请阅读文档，有一个完整的部分专门介绍表单处理：Forms
以前，您也可以使用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>
);
}
});文档在这里：Two-way Binding Helpers。
Stack Overflow用户
发布于 2015-06-03 23:39:19
另一种方法是使用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
由于How do I use radio buttons in React?中描述的许多原因，这种方法并不总是最好的，但在一些简单的情况下，它确实提供了一种有用的替代方案。
Stack Overflow用户
发布于 2019-05-10 14:33:33
补充Michael Schock的回答：
class MyForm extends React.Component {
constructor() {
super();
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const data = new FormData(event.target);
console.log(data.get('email')); // reference by form input's `name` tag
fetch('/api/form-submit-url', {
method: 'POST',
body: data,
});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label htmlFor="username">Enter username</label>
<input id="username" name="username" type="text" />
<label htmlFor="email">Enter your email</label>
<input id="email" name="email" type="email" />
<label htmlFor="birthdate">Enter your birth date</label>
<input id="birthdate" name="birthdate" type="text" />
<button>Send data!</button>
</form>
);
}
}See this Medium article: How to Handle Forms with Just React
此方法仅在按下Submit按钮时获取表单数据。更干净的IMO！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23427384
复制相关文章
相似问题