Reagieren & ReactQuill: Rufen Sie Methoden innerhalb der benutzerdefinierten Komponente aus Symbolleiste

Question

Ich habe das folgende Stück Code aus dieser Demo https://github.com/pc-magas/rwact_quill_call_component:

import React, { Component } from 'react'; 
import ReactQuill from 'react-quill'; 

import '../node_modules/quill/dist/quill.snow.css'; 


const CustomToolbar =() => (
    <div id="toolbar"> 
    <select className="ql-header"> 
     <option value="1"></option> 
     <option value="2"></option> 
     <option selected></option> 
    </select> 
    <button className="ql-bold"></button> 
    <button className="ql-italic"></button> 
    <button className="ql-strike"></button> 
    <button className="ql-underline"></button> 
    <select className="ql-color"> 
     <option value="red"></option> 
     <option value="green"></option> 
     <option value="blue"></option> 
     <option value="orange"></option> 
     <option value="violet"></option> 
     <option value="#d0d1d2"></option> 
     <option selected></option> 
    </select> 
    <button className="ql-test"> 
     <span>Test</span> 
    </button>  
    </div> 
) 

function test(){ 
    console.log('test'); 
    //How to call the 
} 

/** 
* Basic Editor 
*/ 
class MyEditor extends Component { 

    constructor(props) { 
     super(props) 
     this.state={text:''} 
    } 

    onTextChange(value) { 
     this.setState({text:value}) 
    } 

    addGanhamStyle(){ 
     const editor = this.reactQuillRef.getEditor(); 
     const index = editor.getSelection().index || 0; 
     editor.insertText(index + 1, 'Ganham Style!!!!'); 
     editor.insertText(index + 1, '\n'); 
    } 

    render(){ 
     return (
      <div> 
       <CustomToolbar /> 
       <ReactQuill 
        ref={(el) => { this.reactQuillRef = el; }} 
        value={this.state.body} 
        onChange={this.handleChange} 
        modules={MyEditor.modules} 
        formats={MyEditor.formats} 
        theme="snow" 
       /> 
      </div> 
     ) 
    } 

} 

MyEditor.formats = [ 
    'header', 'font', 'size', 
    'bold', 'italic', 'underline', 'strike', 'blockquote', 
    'list', 'bullet', 'indent', 
    'link', 'image', 'color', 
] 

MyEditor.modules = { 
    toolbar: { 
    container: "#toolbar", 
    'image-tooltip': true, 
    'link-tooltip': true, 
    handlers:{ 
     test: test 
    } 
    } 
} 

export default MyEditor; 

Was ich versuche, es zu tun, wenn die test Methode die nennen aufgerufen wird Methode addGanhamStyle von MyEditor. Hast du eine Idee, wie kann ich das tun?

Answer 1

Es sieht so aus, als wäre das Beispiel-Repo, das Sie verlinkt haben, eine Verzweigung dieses Beispiels: https://codepen.io/alexkrolick/pen/gmroPj (unten inliniert).

Der wichtigste Punkt ist, dass der „In diesem Zusammenhang“ (lexikalischer Gültigkeitsbereich) der test Funktion wird bei Anrufzeit eingestellt wird, weshalb der Codepen Beispiel Rückruf Zugriff auf this.quill hat, und warum das Repo Beispiel muss bind verwenden in der Toolbar-Handler-Initialisierung.

/* 
* Custom "star" icon for the toolbar using an Octicon 
* https://octicons.github.io 
*/ 
const CustomButton =() => <span className="octicon octicon-star" /> 

/* 
* Event handler to be attached using Quill toolbar module (see line 73) 
* https://quilljs.com/docs/modules/toolbar/ 
*/ 
function insertStar() { 
    const cursorPosition = this.quill.getSelection().index 
    this.quill.insertText(cursorPosition, "★") 
    this.quill.setSelection(cursorPosition + 1) 
} 

/* 
* Custom toolbar component including insertStar button and dropdowns 
*/ 
const CustomToolbar =() => (
    <div id="toolbar"> 
    <select className="ql-header"> 
     <option value="1"></option> 
     <option value="2"></option> 
     <option selected></option> 
    </select> 
    <button className="ql-bold"></button> 
    <button className="ql-italic"></button> 
    <select className="ql-color"> 
     <option value="red"></option> 
     <option value="green"></option> 
     <option value="blue"></option> 
     <option value="orange"></option> 
     <option value="violet"></option> 
     <option value="#d0d1d2"></option> 
     <option selected></option> 
    </select>  
    <button className="ql-insertStar"> 
     <CustomButton /> 
    </button> 
    </div> 
) 

/* 
* Editor component with custom toolbar and content containers 
*/ 
class Editor extends React.Component { 
    constructor (props) { 
    super(props) 
    this.state = { editorHtml: '' } 
    this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange (html) { 
    this.setState({ editorHtml: html }); 
    } 

    render() { 
    return (
     <div className="text-editor"> 
     <CustomToolbar /> 
     <ReactQuill 
      onChange={this.handleChange} 
      placeholder={this.props.placeholder} 
      modules={Editor.modules} 
      formats={Editor.formats} 
      theme={"snow"} // pass false to use minimal theme 
     > 
      <div 
      key="editor"      
      ref="editor" 
      className="quill-contents"      
      /> 
     </ReactQuill> 
     </div> 
    ) 
    } 
} 

/* 
* Quill modules to attach to editor 
* See https://quilljs.com/docs/modules/ for complete options 
*/ 
Editor.modules = { 
    toolbar: { 
    container: "#toolbar", 
    handlers: { 
     "insertStar": insertStar, 
    } 
    } 
} 

/* 
* Quill editor formats 
* See https://quilljs.com/docs/formats/ 
*/ 
Editor.formats = [ 
    'header', 'font', 'size', 
    'bold', 'italic', 'underline', 'strike', 'blockquote', 
    'list', 'bullet', 'indent', 
    'link', 'image', 'color', 
] 

/* 
* PropType validation 
*/ 
Editor.propTypes = { 
    placeholder: React.PropTypes.string, 
} 

/* 
* Render component on page 
*/ 
ReactDOM.render(
    <Editor placeholder={'Write something or insert a star ★'}/>, 
    document.querySelector('.app') 
)