반응 퀼 onBlur 작동하지 않습니다

Question

반응 응용 프로그램에서 리치 텍스트 편집기로 반응 퀼을 사용하고 있습니다.

텍스트 편집기의 내용을 로컬 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> 
      )   
     } 
    } 

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()); 
      }} 
/>