在ReactJS中获取表单数据

在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 ?
}

我应该在我的handleLogin: function() { ... }中写什么来访问Email和Password字段?

560901 次浏览
小开
最佳答案

在输入端使用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);
}

小提琴工作。

此外，阅读文档，有一整个部分专门用于表单处理:形式

以前你也可以使用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>
);
}
});

文档在这里:双向绑定助手。

小开

另一种方法是使用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 < / p >

由于如何在React中使用单选按钮?中描述的许多原因，这种方法并不总是最好的，但在一些简单的情况下，它确实是一种有用的替代方法。

小开

这可能会帮助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 );
}
小开

我建议采取以下方法:

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>
)
}


}
小开

对付裁判的一个简单方法:

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;

小开

提升用户体验;当用户单击提交按钮时，您可以尝试让表单首先显示发送消息。一旦我们收到来自服务器的响应，它就可以相应地更新消息。我们在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()方法中添加一些逻辑，这些逻辑将根据我们从服务器获得的响应类型而表现不同。例如:

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 ( ...

< a href = " http://codepen.io/hom_bahrani/pen/pPpOGP?编辑=0011" rel="nofollow noreferrer">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);
}
小开

如果你在项目中使用Redux，你可以考虑使用这个更高阶的组件https://github.com/erikras/redux-form。

小开

在javascript中的许多事件中，我们有event，它给出了一个对象，包括发生了什么事件以及值是什么等等……

这也是我们在ReactJs中使用的表单…

所以在你的代码中，你将状态设置为新值…就像这样:

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中的表单示例，只是作为将来创建表单的参考:

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>
);
}
}
小开

你可以将按钮上的onClick事件处理程序切换到表单上的onSubmit事件处理程序:

render : function() {
return (
<form onSubmit={this.handleLogin}>
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Login</button>
</form>
);
},

然后你可以使用FormData来解析表单(如果你想的话，还可以从它的条目构造一个JSON对象)。

handleLogin: function(e) {
const formData = new FormData(e.target)
const user = {}


e.preventDefault()


for (let entry of formData.entries()) {
user[entry[0]] = entry[1]
}


// Do what you will with the user object here
}
小开

有几种方法可以做到这一点:

1)通过索引从数组的表单元素中获取值

handleSubmit = (event) => {
event.preventDefault();
console.log(event.target[0].value)
}

2)在html中使用name属性

handleSubmit = (event) => {
event.preventDefault();
console.log(event.target.elements.username.value) // from elements property
console.log(event.target.username.value)          // or directly
}


<input type="text" name="username"/>

3)使用裁判

handleSubmit = (event) => {
console.log(this.inputNode.value)
}


<input type="text" name="username" ref={node => (this.inputNode = node)}/>

完整的示例

class NameForm extends React.Component {
handleSubmit = (event) => {
event.preventDefault()
console.log(event.target[0].value)
console.log(event.target.elements.username.value)
console.log(event.target.username.value)
console.log(this.inputNode.value)
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
type="text"
name="username"
ref={node => (this.inputNode = node)}
/>
</label>
<button type="submit">Submit</button>
</form>
)
}
}
小开 
 onChange(event){
console.log(event.target.value);
}
handleSubmit(event){
event.preventDefault();
const formData = {};
for (const data in this.refs) {
formData[data] = this.refs[data].value;
}
console.log(formData);
}






<form onSubmit={this.handleSubmit.bind(this)}>
<input type="text" ref="username" onChange={this.onChange} className="form-control"/>
<input type="text" ref="password" onChange={this.onChange} className="form-control"/>
<button type="submit" className="btn-danger btn-sm">Search</button>
</form>

输出图片附在这里

小开

像这样给你的输入参考

<input type="text" name="email" placeholder="Email" ref="email" />
<input type="password" name="password" placeholder="Password" ref="password" />

然后你可以像soo一样在你的handleLogin中访问它

handleLogin: function(e) {
e.preventDefault();
console.log(this.refs.email.value)
console.log(this.refs.password.value)
}
小开

如果你所有的输入/文本区域都有一个名称，那么你可以从event.target过滤所有:

onSubmit(event){
const fields = Array.prototype.slice.call(event.target)
.filter(el => el.name)
.reduce((form, el) => ({
...form,
[el.name]: el.value,
}), {})
}

完全不受控制的形式😊没有onChange方法，值，defaultValue…

小开

更清晰的例子是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>
);
}
}
小开

如果元素名多次出现，则必须使用forEach()。

超文本标记语言

  <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()。

小开

我像这样使用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})
}`
小开

迈克尔·肖克的回答是:

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>
);
}
}

参见this Medium article:如何处理表单与Just React

此方法仅在按下提交按钮时获取表单数据。我觉得干净多了!

小开

对于那些不想使用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>
);
};
小开

我认为这也是你需要的答案。此外，我在这里添加了所需的属性。每个输入组件都是函数。你需要在这里加入你自己的逻辑。

handleEmailChange: function(e) {
this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
this.setState({password: e.target.value});
},
formSubmit : async function(e) {
e.preventDefault();
// Form submit Logic
},
render : function() {
return (
<form onSubmit={(e) => this.formSubmit(e)}>
<input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} required />
<input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange} required />
<button type="button">Login</button>
</form>);
},
handleLogin: function() {
//Login Function
}
小开

这是一个动态添加字段的示例。这里的表单数据将使用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

小开

不需要使用引用，你可以使用事件访问

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>
小开

下面是从表单中获取数据的最短方法，也是使用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
小开 
<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)
}
小开

这是最简单的方法

const formValidator = (form) => {
let returnData = {}
console.log(form.length);


for (let i = 0; i < form.length; i++) {
const data = form[i]
if (data.name != null && data.name != "") {
returnData[data.name] = data.value;
}
}
return returnData
}

在形式上

<form onSubmit={(e) => {
e.preventDefault()
let data = formValidator(e.currentTarget)
}}>
<RoundTextFiled name='app-id' style=\{\{ marginTop: '10px', borderRadius: '20px' }} label="App id" fullWidth required />
<RoundTextFiled name='api-hash' style=\{\{ marginTop: '5px' }} label="Api hash" fullWidth required />
<RoundTextFiled name='channel-id' style=\{\{ marginTop: '5px' }} label="Channel id" fullWidth required />
<Button type='submit' variant="contained" fullWidth style=\{\{ padding: '10px', marginTop: '5px', borderRadius: '10px' }}>Login</Button>
</form>
小开

我知道这个问题很老了，但我想到的最简单的解决方法是:

<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: {email: 'whatever you tiped here', password: 'also whatever you tiped here'} . < / p >

e.target.elements.email.value目标是具有特定名称的元素，在你的例子中是电子邮件和密码。

在console.log之后在handleLogin中你可以做一些验证逻辑和登录逻辑。

小开

对于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>

提交答案