javascript - react-quill onBlur不起作用

我在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>
            )
        }
    }

最佳答案

我的快速解决方案:将模糊处理程序移至QuillComponent的容器div，如下所示:

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

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

           </div>

关于javascript - react-quill onBlur不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47018722/