我必须从我的 render() 方法中获取相同输入类型(例如:电子邮件类型)的值:
<TextField
value={email}
className={classes.textField}
onChange={this.handleChange('email')}
/>
<TextField
value={email}
className={classes.textField}
onChange={this.handleChange('email')}
/>
<TextField
value={email}
className={classes.textField}
onChange={this.handleChange('email')}
/>
<p onClick={this.addMemberHandler}> ADD MORE EMAIL ADDRESSES</p>
我没有这个限制。状态值、handleChange、addMemberHandler 方法
state = {
addOneMoreEmail: false,
emailCounter: 0,
email: ''
};
handleChange = name => event => {
this.setState({
[name]: event.target.value
});
};
addMemberHandler = () => {
this.setState({
addOneMoreEmail: true
});
};
我的问题是:如何获取处于我状态的所有电子邮件(哪个用户已输入),以便 onSubmit 我将发送数组中的所有电子邮件?
基本上如何为每封电子邮件动态维护不同的状态?
您只为多个-井-状态提供一个状态字段。这是行不通的。你既可以拥有多个领域,如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。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句