How to deal with onChange in ReactQuill Editor?

Question

I am using ReactQuill component in my react project . In my page i have multiple component like (TextBox/InputNumber Box/DropDown) so from each component i am calling a event

<TextField  error={this.state.postForm.isValidationActive && !this.state.postForm.targetDateValid} name="targetDate" onChange={this.handleChange} type="date"  label="Target date" variant="outlined"  />

So this component also calling handleChange event and this onChange will pass event and from event we can get the value

 handleChange(event) {
        console.log('Value', event.target.value);
}

So i want to call same handelChange event but

The onChange for the TextField input receives an event containing name and value.On the other hand the onChange for the Quill component receives the actual content.

SO i tried to wrote a separate event method

 handleChangeEditor(editor) {
        console.log('background', editor);
        let _postForm = this.state.postForm;

        _postForm.notesValid = true;
        _postForm.notes = editor;

        if (editor.length < 30) { _postForm.notesValid = false; }

        

        this.setState({ ...this.state, postForm: _postForm });
    };

But after doing this ,this line of code have some issue this.setState({ ...this.state, postForm: _postForm }); if i will add this then ReactQuill Editor's text area wont show anything whatever i am writing.

and ReactQuill COmponent be like

 <ReactQuill theme="snow" formats={this.formats} value={this.state.text || ''} modules={this.modules} placeholder="Write Something about your view" id="notesTextArea" error={this.state.postForm.isValidationActive && !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />

score 3 · Answer 1 · answered Dec 10 '20 at 13:38

So after some few changes i am able to fix the issue

First change in component ,in value section used this.state.postForm.notes

<ReactQuill theme="snow" formats={this.formats} value={this.state.postForm.notes || ''} modules={this.modules} placeholder="Write Something about your view" id="notesTextArea" error={this.state.postForm.isValidationActive && !this.state.postForm.notesValid} onChange={this.handleChangeEditor} name="notesTextArea" />

Second change in Handler Method

 handleChangeEditor(editor) {
        console.log('background', editor);
        let _postForm = this.state.postForm;

        _postForm.notesValid = true;
        _postForm.notes = editor;

        if (editor.length < 30) { _postForm.notesValid = false; }



        this.setState({ ...this.state, postForm: _postForm });
    };

How to deal with onChange in ReactQuill Editor?

1 Answers1