在状态数组中使用onChange更新多个输入，并在React中显示onSubmit

Question

我有一个简单的应用程序，其中有一个带有多个输入和一个按钮的表单。我想更新状态数组中的输入值，并在提交时显示它们。我正试图使用onChange来更新输入值，但我不知道该怎么做。

import React, { Component } from 'react';
class Info extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
toggled: false,
}
this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
//display html when saved
//when edited, bring back the inputs
onSubmit(e) {
e.preventDefault();
}
handleChange(e) {
console.log(e.target.value);
}
render() {
return (
<div className="info">
<div>
<h2 className="title"> Personal Information </h2>
</div>
<form action="#" noValidate onSubmit={this.onSubmit}>
<div className='personal-info'>
<div>
<label htmlFor="fName"></label>
<input type="text" id="fName" name="fName" placeholder="First Name" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="lName"></label>
<input type="text" id="lName" name="lName" placeholder="Last Name" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="location"></label>
<input type="text" id="location" name="location" placeholder="Location" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="email"></label>
<input type="email" id="email" name="email" placeholder="Email" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="phone"></label>
<input type="tel" id="phone" name="phone" placeholder="phone" onChange={this.handleChange}></input>
</div>
</div>
<div className='personal-btn-groups'>
<button type="submit">Save</button>
</div>
</form>
</div>
)
}
}

我一直在使用查询选择器来获取vanillajs中的输入值，在我看来这是一种更简单的方法但我知道我在做React时不应该使用它。

我不知道如何使用"onChange"事件处理程序更新输入的值，并在状态数组中更新它们以稍后显示。但这正是我想做的……有人能告诉我吗？

Answer 1

您必须将data的所有输入存储为对象，以避免重复。onSubmit您只需取this.state并将其作为收集的表单数据发送(我刚刚在此处记录了数据(。对于handleChange，您需要使处理程序成为动态的，这样它就可以处理任意多的表单输入。因此，我们使用e.target来访问当前输入的值，并使用元素的名称(e.target.name(将数据及其值(e.target.value(保存到状态。如果问题不清楚，可以随意提出。

import React, { Component } from 'react';
class Info extends Component {
constructor(props) {
super(props);
this.state = {
data: {},
toggled: false,
}
this.onSubmit = this.onSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
onSubmit(e) {
e.preventDefault();
console.log(this.state);
}
handleChange(e) {
this.setState({ ...this.state, data: {...this.state.data, [e.target.name]: e.target.value } })
}
render() {
return (
<div className="info">
<div>
<h2 className="title"> Personal Information </h2>
</div>
<form action="#" noValidate onSubmit={this.onSubmit}>
<div className='personal-info'>
<div>
<label htmlFor="fName"></label>
<input type="text" id="fName" name="fName" placeholder="First Name" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="lName"></label>
<input type="text" id="lName" name="lName" placeholder="Last Name" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="location"></label>
<input type="text" id="location" name="location" placeholder="Location" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="email"></label>
<input type="email" id="email" name="email" placeholder="Email" onChange={this.handleChange}></input>
</div>
<div>
<label htmlFor="phone"></label>
<input type="tel" id="phone" name="phone" placeholder="phone" onChange={this.handleChange}></input>
</div>
</div>
<div className='personal-btn-groups'>
<button type="submit">Save</button>
</div>
</form>
</div>
)
}
}
export default Info;

Answer 2

您需要使用this.setState来存储要反应状态的值。以下是在this.state.form:处存储对象的输入值的示例

import React, { Component } from 'react'
export default class Info extends Component {
constructor(props) {
super(props)
this.state = {
data: [],
toggled: false,
form: {}
}
this.onSubmit = this.onSubmit.bind(this)
this.handleChange = this.handleChange.bind(this)
}
//display html when saved
//when edited, bring back the inputs
onSubmit(e) {
e.preventDefault()
}
handleChange(newForm) {
this.setState({
...this.state,
form: {
...this.state.form,
...newForm
}
})
}
render() {
return (
<div className="info">
<div>
<h2 className="title"> Personal Information </h2>
</div>
<form action="#" noValidate onSubmit={this.onSubmit}>
<div className="personal-info">
<div>
<label htmlFor="fName"></label>
<input
type="text"
id="fName"
name="fName"
placeholder="First Name"
onChange={(e) =>
this.handleChange({
fName: e.currentTarget.value
})
}
value={this.state.form.fName}
></input>
</div>
<div>
<label htmlFor="lName"></label>
<input
type="text"
id="lName"
name="lName"
placeholder="Last Name"
onChange={(e) =>
this.handleChange({
lName: e.currentTarget.value
})
}
value={this.state.form.lName}
></input>
</div>
<div>
<label htmlFor="location"></label>
<input
type="text"
id="location"
name="location"
placeholder="Location"
onChange={(e) =>
this.handleChange({
location: e.currentTarget.value
})
}
value={this.state.form.location}
></input>
</div>
<div>
<label htmlFor="email"></label>
<input
type="email"
id="email"
name="email"
placeholder="Email"
onChange={(e) =>
this.handleChange({
email: e.currentTarget.value
})
}
value={this.state.form.email}
></input>
</div>
<div>
<label htmlFor="phone"></label>
<input
type="tel"
id="phone"
name="phone"
placeholder="phone"
onChange={(e) =>
this.handleChange({
phone: e.currentTarget.value
})
}
value={this.state.form.phone}
></input>
</div>
</div>
<div className="personal-btn-groups">
<button type="submit">Save</button>
</div>
</form>
</div>
)
}
}

Answer 3

您可以在状态中使用单独的属性来存储值

import React, { Component } from 'react';
export default class Info extends Component {
constructor(props) {
super(props);
this.state = {}
}
//display html when saved
//when edited, bring back the inputs
onSubmit = (e) => {
e.preventDefault();
console.log('state', this.state)
}
handleChange = (e, key) => {
// dynamic key
this.setState({[key]: e.target.value})
}
render() {
const { fName = "", lName = "", location = "", Email = "", phone = "" } = this.state;
return (
<div className="info">
<div>
<h2 className="title"> Personal Information </h2>
</div>
<form action="#" noValidate onSubmit={this.onSubmit}>
<div className='personal-info'>
<div>
<label htmlFor="fName"></label>
<input type="text" value={fName} id="fName" name="fName" placeholder="First Name" onChange={e => this.handleChange(e, 'fName')}></input>
</div>
<div>
<label htmlFor="lName"></label>
<input type="text" value={lName} id="lName" name="lName" placeholder="Last Name" onChange={e => this.handleChange(e, 'lName')}></input>
</div>
<div>
<label htmlFor="location"></label>
<input type="text" value={location} id="location" name="location" placeholder="Location" onChange={e => this.handleChange(e, 'location')}></input>
</div>
<div>
<label htmlFor="email"></label>
<input type="email" value={Email} id="email" name="email" placeholder="Email" onChange={e => this.handleChange(e, 'Email')}></input>
</div>
<div>
<label htmlFor="phone"></label>
<input type="tel" value={phone} id="phone" name="phone" placeholder="phone" onChange={e => this.handleChange(e, 'phone')}></input>
</div>
</div>
<div className='personal-btn-groups'>
<button type="submit">Save</button>
</div>
</form>
</div>
)
}
}