我在我的 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 and value.On the other hand the onChange for the Quill component receives the 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" />
最佳答案
因此,经过一些更改后,我能够解决问题
第一次更改组件,在 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 });
};
关于javascript - ReactQuill Editor 中的 onChange 怎么处理?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65233507/