I am using ReactQuill ponent in my react project . In my page i have multiple ponent like (TextBox/InputNumber Box/DropDown) so from each ponent 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 ponent 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 ponent 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" />

I am using ReactQuill ponent in my react project . In my page i have multiple ponent like (TextBox/InputNumber Box/DropDown) so from each ponent 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 ponent 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 ponent 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" />

• javascript
• reactjs
• quill
• react-quill

1 Answer 1

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

First change in ponent ,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 });
    };