在 react 组件中的 handleChange(e) 函数中使用“e”来访问文本框值是不是有任何替代方法？ [复制]

Posted 2023-02-22

【中文标题】在 react 组件中的 handleChange(e) 函数中使用“e”来访问文本框值是不是有任何替代方法？ [复制]

【英文标题】：Is there any alternate for the use of 'e' in handleChange(e) function in react component for accessing textbox value? [duplicate]在 react 组件中的 handleChange(e) 函数中使用“e”来访问文本框值是否有任何替代方法？ [复制]

【发布时间】：2021-04-03 00:53:33

【问题描述】：

这里是 React 组件的代码 sn-p：

  handleChange(e) 
    this.setState( value: e.target.value );
  


  render() 
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange=this.handleChange
          defaultValue=this.state.value
        />
      </div>
    );
  

在handleChange(e) 函数中e 的用途是什么？它是如何派生的？

【问题讨论】：

这是事件，它是在调用回调时由 React 传入的（使用错误的 this，你会发现）。阅读文档：reactjs.org/docs/handling-events.html

【参考方案1】：

"e" 是 React 传递给你的句柄更改函数的合成事件参数。在此处阅读更多信息：React Events

这里无法解释完整的概念，所以你必须更多地了解 DOM 和 React，先从事件开始 here。

【参考方案2】：

e 是 textarea HTML 元素在其 onChange 被触发时创建的事件，换句话说，当对 textarea 值进行更改时。它包含有关哪个元素的值发生了变化 (e.target) 以及它被设置为哪个值 (e.target.value) 以及其他数据的信息。您可以尝试通过在handleChange 中使用console.log(e) 来记录它，以查看它包含的所有数据。 （e 通常还包含操作其行为方式的方法，例如 e.preventDefault()，但通常在 textarea onChange 生成的事件的情况下没有用。）

名称e 是任意的，可以设置为您想要的任何名称。 target 和 value 属性不是。

还请注意，根据事件调度的来源，可以创建许多类似的event。一个例子是在某处用鼠标单击，这使您可以访问其他数据 - 例如单击的 X 和 Y 坐标 - 而不是触发 textarea onChange 时调度的数据。两者通常称为e 或element。