【发布时间】：2019-02-23 18:58:03
【问题描述】：
我正在开发一个具有可重用组件的应用程序，该组件可在需要时生成文本区域。该组件从其父组件接收一个 onChange 函数作为 prop 名称为 onChange。现有代码使用具有一致高度的 textarea 元素，并且此 textarea 触发 onChange 函数没有问题。
我现在正在努力使该区域垂直增长而不是添加溢出栏，并将 textarea 标记替换为 div，这允许自动增长按预期工作。但是，div 标签将不再触发 textarea 元素触发的 onChange 属性，而不会出现问题。我能够确认 onChange 道具具有相同的功能，但我很难理解为什么它不起作用。我想知道我的代码中是否缺少某些东西，或者我是否误解了 onChange 函数在 React 中的工作方式。尽管我尝试了对 div 的多项更改，但我已经粘贴了原始代码并猜测了更新后的代码应该是什么样子。
提前感谢您对此提供的任何帮助！
原文区号：
<textarea className={textAreaStyle} {...textareaProps} rows={rows} />
更新的 div 代码：
<div
className={textAreaStyle}
rows={rows}
contentEditable="true"
{...textareaProps}
onChange={props.onChange}
>
{value}
</div>
更新 1：我尝试用 onInput={props.onChange} 替换行 onChange={props.onChange}，现在函数正在被命中，但实际状态没有被更新。看看我是否可以修复未更新的状态以解决此问题。
【问题讨论】：
-
传递给onChange属性的变量，是否在当前范围内？如果没有，我假设您需要使用它，因为道具通常是函数/类范围的。使用 onChange={this.props.onChange}
-
我仔细检查了一下，它在当前范围内。如果我 console.log 记录 props.onChange 值，则返回预期的函数。
-
尝试 onChange={() => props.onChange}，这将像控制台记录时所说的那样执行并返回函数
-
不幸的是，进行该更改对 div 没有任何影响，尽管当它是 textarea 元素时仍然有效。
-
确实解决了功能问题。但是，通过进行此更改，文本区域高度的自动增长将不起作用。我正在尝试找到一种方法来获得高度的自动增长和触发 onChange 函数，到目前为止，我只能根据使用的 HTML 元素做一个或另一个。
标签： javascript html css reactjs