Question

当我保存表单（onSubmit）时，我收到此错误：您正在将delta事件从onChange事件传回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将初始值解释为delta根，但我通过传递一个空字符串来解决此警告：

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

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

Answer 2

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

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


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

Answer 3

我在Form项目的ant-design-pro中使用了它，并通过添加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>

React-Quill - 错误你很可能想要`editor.getContents（）`

3 个答案: