19

When I save the form (onSubmit) I get this Error: You are passing the delta object from the onChange event back as value. You most probably want editor.getContents() instead.

The rest of the script runs fine and writes everything into the database as expected, but React-Quill triggers the error and hangs up the page.

What do I need to do to define editor.getContents()?

export default class CreateDiscussionForm extends Component {
constructor(props){
super(props);
this.state = {
  error: '',
  editorHtml: ''
};
this.handleChange = this.handleChange.bind(this);
}

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

onSubmit(e) {
 var background = this.state.editorHtml;
 console.log('background', background); //<p>testing</p>
 //... rest of code



<ReactQuill
    name="editor"
    theme={'snow'}
    ref="comment"
    onChange={this.handleChange}
    value={this.state.editorHtml}
    modules={quillModules}
    placeholder="add the discussion background (optional)"
/>

Thanks in advance - Bob

Bob Lorriman
  • 359
  • 1
  • 3
  • 10

3 Answers3

55

Not sure about why Quill interprets the initial value as a delta root, but i solved this warning by passing an empty string like this:

<ReactQuill
    name="editor"   
    onChange={this.handleChange}
    value={this.state.editorHtml || ''}
/>

The error links to here btw: https://github.com/zenoamaro/react-quill#using-deltas And this is a more advanced description of what Quill interprets as deltas: https://quilljs.com/docs/delta/ (basically, deltas are changes stored in json format, and they are handled apart from quill, meaning it's an external library)

mayid
  • 1,644
  • 15
  • 23
  • it works because for undefined value, its like no value at all. you must be accessing value of component before on change is called. setting empty value as default thus saves the day. – shanu khera Jan 23 '19 at 08:53
  • Why if you want to set a default falue loaded in state variable? – Adrián Rodriguez Oct 15 '20 at 13:57
3

I used it in a Form of an ant-design-pro project and fixed it by adding an initialValue:

 <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 30, offset: 2 }} label="Current Week Report">
        {form.getFieldDecorator('currentWeekReport', {
          rules: [{ required: true, message: 'Please enter at least five letters', min: 5 }],
          initialValue: ''
        })(<ReactQuill placeholder="please enter at least five letters" />)}
</FormItem>
troy
  • 2,145
  • 2
  • 23
  • 31
0

Instead of trying to access event.target.value, you should access the value:

<ReactQuill value={about} onChange={handleQuillChange} />


const handleQuillChange = value => {
    console.log(value);
};
Ryan Dhungel
  • 3,637
  • 4
  • 19
  • 26