如何从反应中的多个字段中获取相同输入类型的值？

Question

我必须从相同的输入类型（例如：电子邮件类型）获取值，这是在我的 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时将所有邮件发送到一个数组中？

基本上我怎样才能动态地为每封电子邮件维护不同的状态？

Answer 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。

如何从反应中的多个字段中获取相同输入类型的值？

How to get values from same input type from multiple fields in react?

reactjs

react-dom

react-fullstack

react-state-management