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

对于<script> function saveCookies() { if (document.userData.field1.value == "") { alert("Please Fill In All Form Values!"); return; } else { cookievalue1 = escape(document.userData.field1.value); document.cookie = cookievalue1; alert("The Following Data Has Been Saved To a Cookie:\n" + "\nFirst Name = " + cookievalue1); } } function showCookies() { alert("First Name: " + cookievalue1) } function clearCookies() { document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; } </script> //html code below <!DOCTYPE HTML> <html> <head> <script> //javascript code already posted </head> <body> User's First Name: <input type="text" id="field1"> <button onclick="saveCookies()">Save The Cookie</button> <button onclick="showCookies()">Show The Cookie</button> <button onclick="clearCookies()">Clear The Cookie</button> </body> </html>属性，此处没有调用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>

Answer 2

当我们尝试以异步方式访问React合成事件时，将触发此警告。由于 reuse （重用），在调用事件回调之后，合成事件对象将不再存在，因此我们无法访问其属性。 source

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

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

onChange在哪里将参数传递给其处理程序

2 个答案: