在反应组件中的handleChange(e)函数中使用“e”来访问文本框值是否有任何替代方法？

Question

这是 React 组件的代码片段：

  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以及它是如何导出的？

Answer 1

“e”是 React 传递给句柄更改函数的合成事件参数。这里无法解释完整的概念，因此您必须了解更多 DOM 和 React，首先从事件开始。

Answer 2

e是 textarea HTML 元素在触发时（onChange即对 textarea 值进行更改时）创建的事件。它包含有关哪个元素的值已更改 (&nbsp;e.target) 以及它被设置为哪个值 (&nbsp;e.target.value) 的信息以及其他数据。console.log(e)您可以尝试使用inside来记录它handleChange以查看它包含的所有数据。（e通常还包含用于操纵其行为方式的方法，例如e.preventDefault()，但通常在由 textarea 生成的事件的情况下没有用onChange。）该名称e是任意的，可以设置为您想要的任何名称。属性target和value不是。event另请注意，根据事件分派的来源，可以创建许多类似的内容。一个例子是用鼠标单击某处，这使您可以访问其他数据（例如单击的 X 和 Y 坐标），而不是触发 textarea 时onChange调度的数据。两者通常称为e或element。