javascript - react onChange 不从 Div 触发

Question

我正在开发一个应用程序，该应用程序具有可在需要时生成文本区域的可重用组件。该组件从其父级接收一个 onChange 函数作为 Prop ， Prop 名称为 onChange。现有代码使用具有一致高度的 textarea 元素，并且此 textarea 会毫无问题地触发 onChange 函数。

我现在正在努力让区域垂直增长，而不是添加溢出栏，并将 textarea 标签替换为 div，这允许自动增长按预期工作。但是，div 标签将不再触发 textarea 元素毫无问题地触发的 onChange Prop 。我能够确认 onChange Prop 具有相同的功能，但我很困惑为什么它不起作用。我想知道我的代码中是否缺少某些东西，或者我是否误解了 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} 行，现在函数被调用了，但实际状态并未更新。看看我是否可以修复状态未更新以解决此问题。

Answer 1

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

https://github.com/lovasoa/react-contenteditable

如果您正在寻找文本区域的自动调整大小，您可以依赖 UI Kit，例如 Semantic UI React。

如果您正在寻找自定义解决方案，仍然可以找到有关主题的完整答案:

React.js: onChange event for contentEditable