React-Quill - ERROR You most probably want `editor.getContents()` instead

user_1720150 0
Viewed 14414

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

quill reactjs
3 Answers

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>
user_37621050

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

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


const handleQuillChange = value => {
    console.log(value);
};
user_56165530
Related