event.target.value вопрос с React. js

Question

Я просматриваю документацию по React. js на этом веб-сайте и наткнулся на код, который меня смутил.

Насколько я понимаю, предварительно заполненное состояние Флажок isGoing будет истинным (следовательно, отмечен), тогда как numberOfGests - 2.

Часть, которую я запутал, - это функция handleInputChange (), которая устанавливает переменную target равно event.target - это предварительно созданный атрибут, который возвращает элемент DOM, вызвавший событие. значение переменная , позволяет target.name извлекать имя и присваивать его target.checked как истинное, а target.value как ложное. «Target.checked» извлекает текущее состояние isOnGoing, которое в настоящее время является логическим значением «истина», но что извлекает «target.value»? Может ли кто-нибудь объяснить мне эту часть?

Кроме того, просто чтобы убедиться, что я правильно это понимаю: имя переменной равно event.target.name или я неправильно понимаю?

Спасибо за вашу помощь.

class Reservation extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isGoing: true,
      numberOfGuests: 2
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const target = event.target;
    const value = target.name === 'isGoing' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

  render() {
    return (
      <form>
        <label>
          Is going:
          <input
            name="isGoing"
            type="checkbox"
            checked={this.state.isGoing}
            onChange={this.handleInputChange} />
        </label>
        <br />
        <label>
          Number of guests:
          <input
            name="numberOfGuests"
            type="number"
            value={this.state.numberOfGuests}
            onChange={this.handleInputChange} />
        </label>
      </form>
    );
  }
}

Answer 1

Вопрос 1

Меня смущает функция handleInputChange (), которая устанавливает переменную target, равную event.target - это предварительно созданный атрибут, который возвращает сработавший элемент DOM событие. Переменная value позволяет target.name получить имя и присваивает его target.checked как истинное, а target.value как ложное. «Target.checked» извлекает текущее состояние isOnGoing, которое в настоящее время является логическим значением true, но что извлекает «target.value»?

Ответ 1

React использует Syntheti c события , которые быстро возвращаются обратно в пул событий для повторного использования, поэтому обычно сохраняют или деструктурируют объект события для сохранения в состоянии, которое также является асинхронным по своей природе, т. е. обновление состояния не выполняется. t происходит немедленно, и объект события может быть аннулирован и возвращен обратно в пул событий до обработки обновления состояния.

handleInputChange(event) {
  // save the target object for future reference
  const target = event.target;

  // Check if the target is the checkbox or text input to save the value
  const value = target.name === 'isGoing' ? target.checked : target.value;

  // Save the input name, i.e. name = state object
  const name = target.name;

  this.setState({
    [name]: value
  });
}

Как это работает

Обработчик обращается к имени и проверке / значению входа, поэтому, предоставляя то же имя входам, которые используются в состоянии, обработчик может динамически сохранять правильное значение в свойство правильного состояния.

IE, если флажок установлен, то целевое имя - "isGoing", а значение - это целевое проверенное значение, true или false. setState преобразуется во что-то похожее на

this.setState({ isGoing: true });

Более общий или более общий c обработчик должен проверять тип вместо того, чтобы правильно получить доступ к проверенному свойству или свойству обычного значения.

handleInputChange(event) {
  // Destructure type, checked, name, and value from event.target
  const { type, checked, name, value } = event.target;
  this.setState({ [name]: type === 'checkbox' ? checked : value });
}

но что получает "target.value"?

Как правило, в этом случае он просто обращается к полю target.value потенциально любого ввод, который использует handleInputChange в качестве обратного вызова. В этом конкретном случае c это будет значение ввода "numberOfGuests".

Вопрос 2

Кроме того, просто чтобы убедиться, что я правильно понимаю это: равно ли имя переменной event.target.name или я это неправильно понимаю?

Ответ 2

Да, const name = target.name; просто сохраняет целевое имя события в переменной позвонил name. Аналогично, const { name } = target эквивалентно.

Answer 2

but what does "target.value" retrieve? Can someone explain that part to me?

Код создает динамический c changeHandler для формы, которая использует два типа входных данных: число и проверено. Текстовые / числовые входы имеют свойство значения, в то время как отмеченные входные данные имеют свойство checked. Таким образом, троичный оператор используется для возврата либо target.checked, если target.name совпадает с именем единственного входа флажка («isGoing»), либо target.value для всех других входов (в данном случае просто «numberOfGests»).

 is the variable name equal to event.target.name 

Продолжая концепцию Dynami c, имя переменной действительно приравнивается к target.name для удобства чтения (оно сокращает target.name до name, так же как target.name сокращает e.target.name ). Затем имя передается как ключ свойства для обновления в состоянии. Итак, если имя входа - «numberOfGests», и существует свойство состояния с именем «numberOfGests», то это свойство состояния будет обновлено. Если свойство состояния не существует, response просто создаст новое свойство в состоянии.

В целом цель состоит в том, чтобы создать 1 обработчик событий onChange, который можно использовать для всех входных данных и для любого свойства состояния, а не давать каждый ввод - свой уникальный обработчик.