Question

我已经建模了一个自定义工具栏，该工具栏使用以下代码笔在光标位置插入文本：

https://codepen.io/alexkrolick/pen/gmroPj?editors=0010

但是，我需要能够将prop值传递给insertText函数。我尝试过重构，以至于无法完全理解。我将如何重构该组件，以便可以将prop text值传递给insertText函数？这是我到目前为止的代码：

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

function insertText() {
  const text = 'example123'
  // need this to be accessed from props.text
  const cursorPosition = this.quill.getSelection().index;

  this.quill.insertText(cursorPosition, text);
  this.quill.setSelection(cursorPosition + (text.length));
}

const CustomToolbar = () => (
  <div id="toolbar">
    <select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
      <option value="1" />
      <option value="2" />
      <option selected />
    </select>
    <button className="ql-bold" />
    <button className="ql-italic" />
    <button className="ql-insertText">
      Insert Promo Code
    </button>
  </div>
);

class Editor extends Component {
  constructor(props) {
    super(props);
    // Note: text is passed in as a prop
  }

  render() {
    const { template, handleChange, onSave } = this.props

    return (
      <div className='modal fade' id='instruction-template-edit-modal' tabIndex='-1' role='dialog' aria-labelledby='myModalLabel'>
        <div className='modal-dialog modal-lg' role='document'>
          <div className='modal-content'>
            <div className='modal-header'>
              <button
                type='button'
                className='close'
                data-dismiss='modal'
                aria-label='Close'>
                <span aria-hidden='true'>&times;</span>
              </button>
              <h4
                className='modal-title general-header-text margin-left-15'
                id='myModalLabel'>
                Edit Instruction Template
              </h4>
            </div>
            <div className='modal-body'>
              <div className='instruction-template row text-editor'>
                <CustomToolbar />
                <ReactQuill value={template.content || ''} 
                  modules={Editor.modules}
                  formats={Editor.formats}
                  onChange={handleChange} />
              </div>
              <div className='row margin-top-20'>
                <a type='button'
                  className='cancel-link'
                  data-dismiss='modal'
                  aria-label='Close'>
                  Cancel
                </a>
                <button className='button-blue pull-right'
                  data-dismiss='modal'
                  aria-label='Save'
                  onClick={() => onSave(template) }>
                  SAVE
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Editor.modules = {
  toolbar: {
    container: "#toolbar",
    handlers: {
      insertText: insertText
    }
  },
  clipboard: {
    matchVisual: false,
  }
};

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

export default Editor;

Answer 1

首先，将 Editor.modules 设置为类属性，以便您可以访问 props ，然后通过传递回调参考< / strong>，然后将道具和羽毛笔编辑器作为参数传递给 insertText 函数。

我已更新您的示例以使其生效，这是链接：

https://codepen.io/jojo-tutor/pen/VwZzPdx?editors=0010

/* * 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(quillEditor, props) { console.log({ quillEditor, props }) const cursorPosition = quillEditor.getSelection().index; quillEditor.insertText(cursorPosition, props.character); quillEditor.setSelection(cursorPosition + 1); } /* * Custom toolbar component including insertStar button and dropdowns */ const CustomToolbar = () => ( <div id="toolbar"> <select className="ql-header" defaultValue={""} onChange={e => e.persist()}> <option value="1" /> <option value="2" /> <option selected /> </select> <button className="ql-bold" /> <button className="ql-italic" /> <select className="ql-color"> <option value="red" /> <option value="green" /> <option value="blue" /> <option value="orange" /> <option value="violet" /> <option value="#d0d1d2" /> <option selected /> </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); this.reactQuillRef = null } handleChange(html) { this.setState({ editorHtml: html }); } modules = { toolbar: { container: "#toolbar", handlers: { insertStar: () => insertStar( this.reactQuillRef.getEditor(), this.props ) } }, clipboard: { matchVisual: false, } } render() { return ( <div className="text-editor"> <CustomToolbar /> <ReactQuill ref={(el) => { this.reactQuillRef = el }} onChange={this.handleChange} placeholder={this.props.placeholder} modules={this.modules} formats={Editor.formats} theme={"snow"} // pass false to use minimal theme /> </div> ); } } /* * Quill modules to attach to editor * See https://quilljs.com/docs/modules/ for complete options */ /* * 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: PropTypes.string }; /* * Render component on page */ ReactDOM.render( <Editor placeholder={"Write something or insert a star ★"} character="[star]" />, document.querySelector(".app") );

希望这会有所帮助。编码愉快！

将道具传递给反应羽毛笔处理程序

1 个答案: