Как получить значения из одного и того же типа ввода из нескольких полей в React?
Мне нужно получить значения из того же типа ввода (например, типа электронной почты), это в моем методе render ():
<TextField
value = {email}
className = {classes.textField}
onChange = {this.handleChangeEvent('email')}
/>
<TextField
value = {email}
className = {classes.textField}
onChange = {this.handleChangeEvent('email')}
/>
<TextField
value = {email}
className = {classes.textField}
onChange = {this.handleChangeEvent('email')}
/>
<p onClick = {this.addMemberHandler}> ADD MORE EMAIL ADDRESSES</p>
У меня этому нет предела. значения состояния, методы handleChangeEvent, addMemberHandler
state = {
addOneMoreEmail: false,
emailCounter: 0,
email: ''
};
handleChangeEvent = name => event => {
this.setState({
[name]: event.target.value
});
};
addMemberHandler = () => {
this.setState({
addOneMoreEmail: true
});
};
Мой вопрос: как я могу получить все электронные письма (которые ввел пользователь) в моем состоянии, чтобы onSubmit я отправлял все электронные письма в массиве?
В принципе, как я могу динамически поддерживать разное состояние для каждого электронного письма?
Ответы 1
Вы предоставляете только одно поле состояния для нескольких состояний скважины. Это не сработает. У вас может быть несколько полей, таких как state.email1, state.email2 и т. д., Или вы можете использовать массив.
Это должно быть сделано с использованием массива писем в виде состояния:
state = {
emails: []
}
render () {
const emails = this.state.emails
return (
<div>
{emails.map((email, index) => (
<Textfield
key = {index}
value = {email}
onChange = {event => this.setState({
emails: [
...emails.slice(0, index),
event.target.value,
...emails.slice(index + 1)
]
})
))}
<p onClick = {() => this.setState({emails: [...emails, '']})}>add email</p>
</div>
)
}
Это даст вам динамический список писем, который можно расширить, щелкнув <p>.
Обратите внимание, что использование индекса в качестве ключа не рекомендуется: https://reactjs.org/docs/lists-and-keys.html.
Функция обновляет массив state.emails в позиции "index". для обновления массива используется оператор распространения массива. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
Не могли бы вы описать дескриптор изменения? Я не могу этого понять.