Реагировать - использовать один обработчик событий, чтобы установить состояние для нескольких входов? - PullRequest
Новая
       13

Реагировать - использовать один обработчик событий, чтобы установить состояние для нескольких входов?

0 голосов
/ 21 февраля 2020

Я новичок в React и задаюсь вопросом, можно ли использовать один обработчик событий, чтобы установить состояние для многих входов. А именно, я не уверен, как получить «ключ» состояния от ввода в обработчик, если это имеет смысл. 

import React from 'react';

class User extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.state = {
      id: props.id,
      firstName: props.firstName,
      lastName: props.lastName,
      email: props.email,
    };
  }

  // how do I (can I) use this single handler to independently change the the state of multiple inputs?
  handleChange(e) {
    this.setState({ this.state.key // wrong!: this.inputRef.current.value });
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} id={`first_${this.state.id}`} value={this.state.firstName} onChange={this.handleChange.bind(this)} />
        <input type="text" ref={this.inputRef} id={`last_${this.state.id}`} value={this.state.lastName} onChange={this.handleChange.bind(this)} />
        <input type="email" ref={this.inputRef} id={`email_${this.state.id}`} value={this.state.email} onChange={this.handleChange.bind(this)} />
        // imagine ten more inputs
      </div>
    )
  }
}

1 Ответ

1 голос
/ 21 февраля 2020

То, что вы пытаетесь сделать, больше относится к обработке JS событий. 

handleChange(event) {
      const {name, value} = event.target;

      this.setState({
          [name]: value
      });
    }
  • event.target - это элемент, который вызвал это событие (кнопка, текстовая область и т. Д.) 1019 * ..) и вы можете получить из него любой атрибут (имя, тип, значение и т. Д. c ..).
  • Внутри setState вы должны использовать имена аналогичных состояний для это из атрибута имен ваших элементов. Для предоставленного вами фрагмента кода вы можете добавить атрибут имени к первому тегу ввода <input name = "firstName" .... /> и т. Д.
  • Сложнее одновременно сочетать комбинации входов разных типов (например, текстовую область и флажки). чтобы иметь дело с вами, возможно, потребуется немного изменить его или использовать условия, но вы понимаете, что сейчас:)
  • Еще одна вещь, не связывающая ваши обработчики в методе render(), поскольку каждый визуализирует новый Функция возвращает один из правильных способов привязки обработчиков в методе constructor().
...