javascript 模糊上的React套管不工作

neekobn8  于 2023-01-19  发布在  Java
关注(0)|答案(3)|浏览(114)

我在react应用程序中使用react-quill作为富文本编辑器。
我必须将文本编辑器的内容存储在本地React状态,并且只将值发送到Redux 'onBlur'。我的问题是,当获得焦点后,单击文本编辑器外部的按钮时,onBlur不起作用。(即,onBlur在单击屏幕上的非交互元素时起作用,但在单击“保存”按钮时不起作用)。
当前代码:

class TextEditor extends React.Component {
        constructor(props) {
            super(props)
            this.state={
                content: this.props.content;
            }
            this.handleQuillEditor_change = this.handleQuillEditor_change.bind(this)
            this.handleQuillEditor_update = this.handleQuillEditor_update.bind(this)
        }

        handleQuillEditor_change (value) {
            // handleChange...
        }

        handleQuillEditor_update () {
           console.log('blur activated!')
        }

        render() {
            const cmsProps = this.props.cmsProps
            return (
                <div style={containerStyle}>

                      <ReactQuill value={this.state.content}
                                  onChange={this.handleQuillEditor_change} 
                                  onBlur={this.handleQuillEditor_update}/>

               </div>
            )           
        }
    }
omqzjyyz

omqzjyyz1#

我的权宜之计:将模糊处理器移动到QuillComponent的容器div,如下所示:

<div style={containerStyle} onBlur={this.handleQuillEditor_update}>

                  <ReactQuill value={this.state.content}
                              onChange={this.handleQuillEditor_change} />

           </div>
cigdeys3

cigdeys32#

我一直在经历同样的错误,我用这一堆代码修复了它。

<ReactQuill
    onChange={(newValue, delta, source) => {
                if (source === 'user') {
                  input.onChange(newValue);
                 }}}
    onBlur={(range, source, quill) => {
            input.onBlur(quill.getHTML());
           }}
 />
kmpatx3s

kmpatx3s3#

试试下面这段代码:

const handleBlur = (value: string) => {}

return (
  <Quill
    onBlur={(range, source, quill) => {
       handleBlur(quill.getHTML())
    }}
/>
)

相关问题