Где onChange передает аргументы своим сторонникам

Question

с кодом ниже

<div className="input-first-line-right">
  <Input
  type="textarea"
  label="Project Description"
  onChange={this.handleDescChange}
  value={this.state.projectDescription}
  />
</div>

  handleDescChange = text => {
    if (!text) return;
    this.setState({ projectDescription: text });
  };

Если handleDescChange ожидает аргумент 'text', то почему он никогда не передается. Смысл почему не код

onChange={this.handleDescChange("some new text")}

порядок работы функции. Как код наследственно знает, что это за параметр, если ему ничего не передается.

Answer 1

Для атрибута onChange, this.handleDescChange здесь не вызывается. Здесь this.handleDescChange дается в качестве обратного вызова. Компонент ввода вызывает this.handleDescChange, когда инициируется событие изменения.

Если вы хотите передать переменную, вы можете использовать функцию жирной стрелки. Решение приведено ниже.

<div className="input-first-line-right">
  <Input
  type="textarea"
  label="Project Description"
  onChange={event => this.handleDescChange(event.target.value)}
  value={this.state.projectDescription}
  />
</div>

handleDescChange = text => {
    if (!text) return;
    this.setState({ projectDescription: text });
  };

Answer 2

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

Ссылка на источник выше имеет правильный ответ, но вот резюме:

1. Использовать event.persist ()

Примечание. Если вы хотите получить доступ к свойствам события асинхронным способом, вам следует вызвать event.persist () для события, которое удалит синтетическое событие из пула и разрешит ссылки на событие, которое будет сохранено кодом пользователя. Реакция документации

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      projectDescription: ""
    };
  }

  handleDescChange = event => {
    // Add here
    event.persist();
    // Don't check for '!text' Check if there is a value 
    if (event.target.value === 0) return;
    this.setState({ projectDescription: event.target.value });
  };

  render() {
    return (
      <div className="input-first-line-right">
        <input
          type="textarea"
          label="Project Description"
          onChange={this.handleDescChange}
          value={this.state.projectDescription}
        />
      </div>
    );
  }
}

Хотя я бы рекомендовал начать изучать / использовать React hooks , так как это более чистый и элегантный способ сделать это:

import React, { useState } from "react";

const App = () => {
  // useState hook
  const [projectDescription, setProjectDescription] = useState("");

  const handleDescChange = event => {
    if (event.target.value === 0) return;
    setProjectDescription(event.target.value);
  };

  return (
    <div className="input-first-line-right">
      <input
        type="textarea"
        label="Project Description"
        onChange={handleDescChange}
        value={projectDescription}
      />
    </div>
  );
};