Question

我正在开发一个具有可重用组件的应用程序，该组件可在需要时生成文本区域。此组件从其父级以道具名称 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>

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

Answer 1

可内容编辑的行为和事件与Texarea元素不同，所以我建议看一下现成的工作组件，例如：

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

如果您要在textarea中寻找自动调整大小，则可以依赖UI Kit（如语义UI React）。

如果您正在寻找定制解决方案，那么您仍然可以找到有关以下主题的完整答案：

React.js: onChange event for contentEditable

Answer 2

即使添加了content-editable = true，div也不会触发onChange事件，为什么不改用textarea，而是使用CSS来禁用调整大小和溢出功能，否则您需要监听div的“ input”事件，请参见{{3 }}

无论如何，我认为您只需要contenteditable change events

Answer 3

通过在父组件中添加一个小函数，然后在onInput函数中将其作为prop调用，而将onChange函数设置为props.onChange，可以解决此问题。该功能取自下面的文章。

http://usefulangle.com/post/41/javascript-textarea-autogrow-adjust-height-based-on-content

反应onChange不会由Div

3 个答案: