时间戳

首页 > 解决方案 > 反应 onChange 不从 Div 触发

javascript - 反应 onChange 不从 Div 触发

问题描述

我正在开发一个具有可重用组件的应用程序，该组件可在需要时生成文本区域。该组件从其父组件接收一个 onChange 函数作为 prop 名称为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>

更新 1：我尝试用 替换该行onChange={props.onChange}，onInput={props.onChange}现在该函数正在被命中，但实际状态并未更新。看看我是否可以修复未更新的状态以解决此问题。

标签： javascripthtmlcssreactjs

解决方案

甚至添加了content-editable=true，div不会触发onChange事件，为什么不用textarea代替，用css禁用resize和overflow，否则需要监听div的'input'事件，见contenteditable change events

无论如何，我认为您需要的只是https://www.npmjs.com/package/react-autosize-textarea

推荐阅读