javascript - ReactQuill Editor 中的 onChange 怎么处理？

Question

我在我的 react 项目中使用 ReactQuill 组件。在我的页面中，我有多个组件，例如(TextBox/InputNumber Box/DropDown)，所以从每个组件中我都在调用一个事件

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

所以这个组件也调用 handleChange事件和这个 onChange将通过 event从事件中我们可以得到 value

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

所以我想调用同一个 handelChange事件但

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

所以我试图写一个单独的事件方法

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

但是这样做之后，这行代码有一些问题 this.setState({ ...this.state, postForm: _postForm });如果我要添加这个，那么 ReactQuill 编辑器的文本区域将不会显示我正在写的任何内容。
和 ReactQuill 组件就像

 <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" />

Answer 1

因此，经过一些更改后，我能够解决问题
第一次更改组件，在 value使用的部分 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" />

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