我在渲染函数中有一个简单的表单,如下所示:
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
如果元素名多次出现,则必须使用forEach()。
html
<input type="checkbox" name="delete" id="flizzit" />
<input type="checkbox" name="delete" id="floo" />
<input type="checkbox" name="delete" id="flum" />
<input type="submit" value="Save" onClick={evt => saveAction(evt)}></input>
js
const submitAction = (evt) => {
evt.preventDefault();
const dels = evt.target.parentElement.delete;
const deleted = [];
dels.forEach((d) => { if (d.checked) deleted.push(d.id); });
window.alert(deleted.length);
};
注意,本例中的dels是RadioNodeList,而不是数组,也不是Iterable。forEach()是列表类的内置方法。这里不能使用map()或reduce()。
我知道这个问题很老了,但我想到的最简单的解决方法是:
<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之后,你可以做一些验证逻辑和登录逻辑。