Как получить значения из одного и того же типа ввода из нескольких полей в реакции? - PullRequest
Новая
       33

Как получить значения из одного и того же типа ввода из нескольких полей в реакции?

0 голосов
/ 29 мая 2018

Мне нужно получить значения из того же типа ввода (например, тип электронной почты), это в моем методе 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
         });
       };

Мой вопрос: как я могу получить все электронные письма (которые пользователь ввел) в моем состоянии, чтобы при отправке я отправлял все электронные письма в массиве?

Как я могу динамически поддерживать разные состояния для каждого письма?

1 Ответ

0 голосов
/ 29 мая 2018

Вы предоставляете только одно поле состояния для нескольких состояний скважины.Это не может работать.У вас может быть несколько полей, например 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>
  )
}

Thisпредоставит вам динамический список электронных писем, который можно расширить, нажав <p>.

Обратите внимание, что использование индекса в качестве ключа не рекомендуется: https://reactjs.org/docs/lists-and-keys.html.

...