Javascript 在未从Div触发更改时作出反应

我正在开发一个应用程序，它有一个可重用的组件，可以在需要时生成文本区域。此组件将onChange函数作为道具从其父组件接收，道具名称为onChange。现有代码使用高度一致的textarea元素，此textarea会触发onChange函数而不会出现问题

我现在正在努力使区域垂直增长，而不是添加一个溢出条，并用一个div替换了textarea标记，这允许自动增长按预期工作。但是，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>

{value}

---

更新1：我尝试将行

onChange={props.onChange}

替换为

onInput={props.onChange}

，现在函数被命中，但实际状态没有被更新。查看是否可以修复未更新的状态以解决此问题。

Contenteditable行为和事件与Texarea元素不同，因此我建议查看开箱即用的工作组件，如：

如果您想在textarea中自动调整大小，您可以依赖像Semantic UI React这样的UI工具包

如果您正在寻找自定义解决方案，则仍有关于以下主题的完整答案：

---

即使添加了content editable=true，div也不会触发onChange事件，为什么不改为使用textarea，使用css禁用调整大小和溢出，否则需要监听div的“输入”事件，请参阅

---

无论如何，我认为您所需要的就是

我可以通过在父组件中添加一个小函数，然后在

onInput

函数中将其作为prop调用，同时将

onChange

函数设置为props.onChange来解决这个问题。该函数取自下面的文章

---

传递给onChange atribute的变量是否在当前范围内？如果没有，我假设您需要使用它，因为道具通常是函数/类作用域。use onChange={this.props.onChange}我仔细检查了它，它在当前范围内。如果我在console.log中记录props.onChange值，则返回预期的函数。try onChange={（）=>props.onChange}，这将执行并返回函数，就像您在console logging中所说的那样，不幸的是，进行更改对div没有任何影响，虽然当它是textarea元素时仍然有效。但这确实解决了功能问题。但是，通过进行此更改，文本区域高度上的自动增长将不起作用。我正在试图找到一种方法来获取高度上的自动增长和要触发的onChange函数，到目前为止，我只能根据所使用的HTML元素执行其中一种操作。