javascript - How to deal with onChange in ReactQuill Editor? - Stack Overflow

admin管理员组

文章数量:1422446

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

Share Improve this question Follow edited Dec 10, 2020 at 11:29 Subodh Joshi asked Dec 10, 2020 at 11:18 Subodh JoshiSubodh Joshi 13.6k3636 gold badges119119 silver badges210210 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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 });
    };

本文标签： javascriptHow to deal with onChange in ReactQuill EditorStack Overflow