React Quill Handle State Change Name Property is Undefined

user_10187759 0
Viewed 2070

I've been trying to integrate my react app with quill to provide a text input area. I've never used quill before so I am unsure if I need a separate handle change outside of my original. I am able to grab the data from my django backend just fine, but I am unable to edit and update any changes made within the quill box.

Is there a correct way to handle react quill changes?

I have been stuck on this, and I'm not exactly sure how to move forward.

My Code below along with json data. I simply want the description field to be what's included in the quill area. 

import React, { useContext, useState } from 'react';
import ReactQuill from 'react-quill';
import TextInput from '../InputElements/TextInput';
import BaseForm from './BaseForm';
import LabsContext from '../../providers/LabsProvider';

export default function LabsForm() {

  const { 
    editWidgetFormState,
    setEditWidgetFormState 
  } = useContext(LabsContext)

  const handleEditWidgetFormState = (e) => {
    setEditWidgetFormState({
      ...editWidgetFormState,
      [e.target.name]: e.target.value
    })
  }

  return (
    <BaseForm context={LabsContext} >

        <TextInput 
            label={'Lab ID'}
            name='id'
            placeholder={"Lab ID"}
            helperText={'Unique Identifier for a class.'}
            value={editWidgetFormState.id}
            />
        <TextInput 
            label={'Name'}
            name='name'
            placeholder={'Lab Title'}
            helperText={'Friendly name or Title for a class.'}
            onChange={handleEditWidgetFormState}
            value={editWidgetFormState.name}
            />
        <TextInput 
            label={'Category'}
            name='category'
            placeholder={'Lab Category'}
            helperText={'The Category this lab belongs to.'}
            onChange={handleEditWidgetFormState}
            value={editWidgetFormState.category}
            />

            <ReactQuill   
                defaultValue=''
                type='name'
                name='description'  
                onChange={ handleEditWidgetFormState }
                value={editWidgetFormState.description }               
            />                            

    </BaseForm>
  );
}

Json data: 

[
    {
        "id": 3,
        "name": "new",
        "description": "some rich text data here",
        "category": null,
    }
]
django-rest-framework material-ui reactjs
2 Answers

I think it's because ReactQuill does not send an event object the same as a regular input, so you cannot set the property based on e.target.name. It just sends the value prop as the input for the onChange prop handler.

https://github.com/zenoamaro/react-quill

You should just use a separate onChange function that sets it specifically.

const handleQuillEdit = (value) => {
  setEditWidgetFormState((prev) => {
    return {
      ...prev,
      description: value
    }
  })
}

return (
  <ReactQuill   
    defaultValue=''
    onChange={ handleQuillEdit }
    value={editWidgetFormState.description }               
   />      
)
user_119583620

React Quill calls onChange() with 4 args: html, delta, source, editor:
1 html: the editor contents in HTML format, a string
2 delta: the editor contents as a Delta object, Quill's internal and recommended format
3 source: usually "user", the source of the change. Source may be "user", "api", or "silent".
4 editor: a reference to a restricted Quill editor providing a few methods: getBounds: ƒ (), getContents: ƒ (), getHTML: ƒ (), getLength: ƒ (), getSelection: ƒ (), getText: ƒ ()

You can do this.setState({ editorHtml: html }) in the handler, like so:

  handleChange = ( html, delta, source, editor) => {
    this.setState({ editorHtml: html });
  };
user_2433030
Related