我在渲染函数中有一个简单的表单，如下所示:
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(){…}访问电子邮件和密码字段?
当前回答
对于那些不想使用ref和OnChange事件重置状态的人，你可以只使用简单的OnSubmit句柄和循环FormData对象。
注意，你不能直接访问formData.entries()，因为它是一个可迭代对象，你必须循环遍历它。
这个例子使用了React Hooks:
const LoginPage = () => {
const handleSubmit = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
如果你使用的是TypeScript:
export const LoginPage: React.FC<{}> = () => {
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
其他回答
对于那些不想使用ref和OnChange事件重置状态的人，你可以只使用简单的OnSubmit句柄和循环FormData对象。
注意，你不能直接访问formData.entries()，因为它是一个可迭代对象，你必须循环遍历它。
这个例子使用了React Hooks:
const LoginPage = () => {
const handleSubmit = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
如果你使用的是TypeScript:
export const LoginPage: React.FC<{}> = () => {
const handleSubmit: React.FormEventHandler<HTMLFormElement> = (event) => {
const formData = new FormData(event.currentTarget);
event.preventDefault();
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input type="text" name="username" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
</div>
);
};
下面是从表单中获取数据的最短方法，也是使用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
这是一个动态添加字段的示例。在这里，表单数据将使用React useState钩子通过输入名称键存储。
import React, { useState } from 'react' function AuthForm({ firebase }) { const [formData, setFormData] = useState({}); // On Form Submit const onFormSubmit = (event) => { event.preventDefault(); console.log('data', formData) // Submit here }; // get Data const getData = (key) => { return formData.hasOwnProperty(key) ? formData[key] : ''; }; // Set data const setData = (key, value) => { return setFormData({ ...formData, [key]: value }); }; console.log('firebase', firebase) return ( <div className="wpcwv-authPage"> <form onSubmit={onFormSubmit} className="wpcwv-authForm"> <input name="name" type="text" className="wpcwv-input" placeholder="Your Name" value={getData('name')} onChange={(e) => setData('name', e.target.value)} /> <input name="email" type="email" className="wpcwv-input" placeholder="Your Email" value={getData('email')} onChange={(e) => setData('email', e.target.value)} /> <button type="submit" className="wpcwv-button wpcwv-buttonPrimary">Submit</button> </form> </div> ) } export default AuthForm
如果你尝试Aliaksandr Sushkevich解决方案，Typescript会抱怨，一个解决方法可以使用类型断言
<form
onSubmit={(e: React.SyntheticEvent) => {
e.preventDefault();
const target = e.target as typeof e.target & {
username: { value: string };
password: { value: string };
};
const username = target.username.value; // typechecks
const password = target.password.value; // typechecks
// etc...
}}
>
<input type="text" name="username"/>
...
不过，这仍然只是一种变通方法，因为在这里您要告诉typescript期望什么。如果您添加的值没有相应的输入元素，这将在运行时中断。
不需要使用引用，你可以使用事件访问
function handleSubmit(e) {
e.preventDefault()
const {username, password } = e.target.elements
console.log({username: username.value, password: password.value })
}
<form onSubmit={handleSubmit}>
<input type="text" id="username"/>
<input type="text" id="password"/>
<input type="submit" value="Login" />
</form>
