Блог

Мне нужен доступ <ReactQuill/> с помощью кнопки. Например, я нажимаю кнопки и удаляю или сохраняю содержимое ReactQuill . Но я не могу понять, как правильно получить доступ к функциям ReactQuill in React. В примере они предлагают использовать quill переменную для доступа к функциям этого компонента. Например, удалить содержимое компонента quill.setContents([{ insert: 'n' }]) , но вопрос в том, как правильно его определить?

Я пытался сделать это, как в некоторых примерах, но это не сработало.

 const [quill, setQuill] = useState(null);

       <ReactQuill
        style={{height: '45vh', marginBottom: '1px'}}
        ref={(el) => {
         setQuill(el)
        }}
      />
 
     <Button type="primary" icon={<DeleteOutlined />} 
       onClick={()=> 
        quill.setContents([{ insert: 'n' }])}
      >Clear</Button>
 

Может быть, кто-нибудь знает, как правильно определить свою переменную quill?
Я просматривал их документацию, но это не помогло.

используйте ref вместо useState

 const quill = useRef();

<ReactQuill
    style={{height: '45vh', marginBottom: '1px'}}
    ref={quill}
/>

<Button type="primary" icon={<DeleteOutlined />} 
    onClick={()=> 
    quill.current.editor.insertText(0, "text")}
>Clear</Button>