我在渲染函数中有一个简单的表单，如下所示:
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(){…}访问电子邮件和密码字段?
当前回答
我知道这个问题很老了，但我想到的最简单的解决方法是:
<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之后，你可以做一些验证逻辑和登录逻辑。
其他回答
<form onSubmit={handleLogin}>
<input type="text" name="email" placeholder="Email" />
<input type="text" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
const handleLogin = (event) => {
event.preventDefault();
console.log(event.target[0].value)
console.log(event.target[1].value)
}
我像这样使用React Component state:
<input type="text" name='value' value={this.state.value} onChange={(e) => this.handleChange(e)} />
handleChange(e){
this.setState({[e.target.name]: e.target.value})
}`
对于typescript用户
import react from 'react'
interface FormInterface {
[key: string]: string
}
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
let formData = new FormData(event.currentTarget)
let formObj: FormInterface = {}
for (let [key, value] of Array.from(formData.entries())) {
formObj[key] = value.toString()
}
};
<form onSubmit={handleSubmit}>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
如果你在项目中使用Redux，你可以考虑使用这个更高阶的组件https://github.com/erikras/redux-form。
es6析构的更清晰的例子
class Form extends Component {
constructor(props) {
super(props);
this.state = {
login: null,
password: null,
email: null
}
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
let login = this.state.login;
let password = this.state.password;
// etc
}
render() {
return (
<form onSubmit={this.onSubmit.bind(this)}>
<input type="text" name="login" onChange={this.onChange.bind(this)} />
<input type="password" name="password" onChange={this.onChange.bind(this)} />
<input type="email" name="email" onChange={this.onChange.bind(this)} />
<button type="submit">Sign Up</button>
</form>
);
}
}
