是否有任何替代方法可以在 react 组件的 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传递给句柄更改函数的合成事件参数。点击此处阅读更多：React Events

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

Answer 2

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

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

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