2

我在我的反应项目中使用 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事件但是

TextField 输入的 onChange 接收包含名称和值的事件。另一方面，Quill 组件的 onChange 接收实际内容。

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

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

1 回答 1

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 });
    };
于 2020-12-10T13:38:48.313 回答