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合成事件时会触发此警告。由于重用，在调用事件回调之后，合成事件对象将不再存在，因此我们无法访问其属性。 source

上面的源链接有正确的答案，但这里是摘要：

1. 使用event.persist（）

注意：如果要以异步方式访问事件属性，则应在事件上调用event.persist（），这将从池中删除合成事件，并允许用户代码保留对事件的引用。 React documentation

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>
  );
};