反應羽毛筆 onBlur 不工作

Question

我在 React 應用程序中使用 react-quill 作為富文本編輯器。

我必須將文本編輯器的內容存儲在本地 React state 中，並且只發送最大為 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>
            )           
        }
    }

Answer 1

我的快速解決方案：將模糊處理程序移至QuillComponent的容器div，如下所示：

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

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

           </div>

Answer 2

我一直在運行相同的錯誤，並用這堆代碼修復了它。

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

Answer 3

試試這段代碼：

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

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