React-Quill - ERROR您最可能需要`editor.getContents()`

Question

当我保存表单(onSubmit)时，我得到这个错误:您正在将onChange事件中的delta对象作为value传回。您很可能希望使用editor.getContents()。

脚本的其余部分运行良好，并按预期将所有内容写入数据库，但React-Quill会触发错误并挂起页面。

我需要做什么来定义editor.getContents()

export default class CreateDiscussionForm extends Component {
constructor(props){
super(props);
this.state = {
  error: '',
  editorHtml: ''
};
this.handleChange = this.handleChange.bind(this);
}

handleChange (html) {
 this.setState({ editorHtml: html });
}

onSubmit(e) {
 var background = this.state.editorHtml;
 console.log('background', background); //<p>testing</p>
 //... rest of code



<ReactQuill
    name="editor"
    theme={'snow'}
    ref="comment"
    onChange={this.handleChange}
    value={this.state.editorHtml}
    modules={quillModules}
    placeholder="add the discussion background (optional)"
/>

提前感谢-鲍勃

Answer 1

不确定为什么Quill将初始值解释为增量根，但我通过传递一个空字符串解决了这个警告，如下所示：

<ReactQuill
    name="editor"   
    onChange={this.handleChange}
    value={this.state.editorHtml || ''}
/>

错误链接到这里btw：https://github.com/zenoamaro/react-quill#using-deltas，这是对https://quilljs.com/docs/delta/解释为增量的更高级描述(基本上，增量是以json格式存储的更改，它们与quill分开处理，这意味着它是一个外部库)

Answer 2

我在ant-design-pro项目的Form中使用了它，并通过添加initialValue修复了它

 <FormItem labelCol={{ span: 2 }} wrapperCol={{ span: 30, offset: 2 }} label="Current Week Report">
        {form.getFieldDecorator('currentWeekReport', {
          rules: [{ required: true, message: 'Please enter at least five letters', min: 5 }],
          initialValue: ''
        })(<ReactQuill placeholder="please enter at least five letters" />)}
</FormItem>

Answer 3

您应该访问以下值，而不是尝试访问event.target.value：

<ReactQuill value={about} onChange={handleQuillChange} />


const handleQuillChange = value => {
    console.log(value);
};