简体   繁体   English

反应onChange不会从Div触发

[英]React onChange not triggering from Div

I'm working on an app that has a reusable component that generates text areas when needed. 我正在开发一个具有可重用组件的应用程序,该组件在需要时会生成文本区域。 This component receives an onChange function as a prop from its parent with the prop name onChange . 该组件从其父项接收一个onChange函数作为道具,其道具名称为onChange The existing code uses a textarea element that has a consistent height, and this textarea triggers the onChange function without issue. 现有代码使用高度一致的textarea元素,并且此textarea触发onChange函数而不会出现问题。

I am now working on getting the area to grow vertically instead of adding an overflow bar, and have replaced the textarea tag with a div, which allows the autogrowth to work as expected. 我现在正在努力使区域垂直增长,而不是添加溢出栏,并且已将div替换为textarea标记,该标记可使自动增长按预期工作。 However, the div tag will no longer trigger the onChange prop that the textarea element triggered without issue. 但是,div标签将不再触发textarea元素无问题触发的onChange属性。 I'm able to confirm that the onChange prop carries the same function over, but I'm stumped as to why it won't work. 我可以确认onChange属性具有相同的功能,但是我为它为什么不起作用而感到困惑。 I was wondering if there is something that I'm missing in my code, or if I'm misunderstanding about how onChange functions work within React. 我想知道代码中是否缺少某些内容,或者是否对onChange函数在React中的工作方式有误解。 I've pasted the original code and my best guess at what the updated code should look like, although I've tried multiple changes on the div. 尽管我已经尝试了div的多个更改,但是我已经粘贴了原始代码,并且最好地猜测了更新后的代码的外观。

Thanks in advance for any help on this! 在此先感谢您的任何帮助!

Original textarea code: 原始文本区代码:

<textarea className={textAreaStyle} {...textareaProps} rows={rows} />

Updated div code: 更新的div代码:

      <div
        className={textAreaStyle}
        rows={rows}
        contentEditable="true"
        {...textareaProps}
        onChange={props.onChange}
      >            
        {value}
      </div>

Update 1: I've tried replacing the line onChange={props.onChange} with onInput={props.onChange} , and now the function is being hit, but the actual state isn't being updated. 更新1:我尝试用onInput={props.onChange}替换行onChange={props.onChange} ,现在函数被命中,但是实际状态没有被更新。 Seeing if I can fix the state not being updated to resolve this issue. 查看我是否可以解决未更新的状态以解决此问题。

Contenteditable behaviour and events differs from Texarea element so I suggest to take a look to out-of-the-box working component like: 可内容编辑的行为和事件与Texarea元素不同,因此我建议看一下现成的工作组件,例如:

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

If you are looking for autosize in textarea you can rely on UI Kit like Semantic UI React. 如果您要在textarea中寻找自动调整大小,则可以依赖UI Kit,例如Semantic UI React。

If you are looking for a custom solution there are still complete answers available on topic: 如果您正在寻找定制解决方案,那么您仍然可以找到有关以下主题的完整答案:

React.js: onChange event for contentEditable React.js:contentEditable的onChange事件

even added content-editable=true, div won't trigger onChange event, why dont you use textarea instead, use css to disable resize and overflow, otherwise you need to listen 'input' event for div, see contenteditable change events 即使添加了content-editable = true,div也不会触发onChange事件,为什么不改用textarea,而是使用CSS禁用调整大小和溢出功能,否则您需要监听div的“ input”事件,请参阅contenteditable更改事件

anyway, I think all you need is https://www.npmjs.com/package/react-autosize-textarea 无论如何,我认为您需要的只是https://www.npmjs.com/package/react-autosize-textarea

I was able to fix this by using adding a small function in the parent component and then calling it as a prop in an onInput function, while leaving the onChange function set to props.onChange. 我可以通过在父组件中添加一个小函数,然后在onInput函数onInput其作为prop调用,而将onChange函数设置为props.onChange来解决此问题。 The function was taken from the article below. 该功能摘自以下文章。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM