React Quill句柄状态更改名称属性未定义

Question

我一直在尝试将我的react应用程序与quill集成，以提供文本输入区域。我以前从未使用过羽毛笔，所以我不确定是否需要在原来的羽毛笔之外单独更换手柄。我可以很好地从我的django后端获取数据，但我无法编辑和更新在quill框中所做的任何更改。

有没有一种正确的方法来处理response quill更改？

我一直被困在这个问题上，我不知道该如何前进。

下面的我的代码以及json数据。我只是希望描述字段是包含在quill区域中的字段。

import React, { useContext, useState } from 'react';
import ReactQuill from 'react-quill';
import TextInput from '../InputElements/TextInput';
import BaseForm from './BaseForm';
import LabsContext from '../../providers/LabsProvider';
export default function LabsForm() {
const { 
editWidgetFormState,
setEditWidgetFormState 
} = useContext(LabsContext)
const handleEditWidgetFormState = (e) => {
setEditWidgetFormState({
...editWidgetFormState,
[e.target.name]: e.target.value
})
}
return (
<BaseForm context={LabsContext} >
<TextInput 
label={'Lab ID'}
name='id'
placeholder={"Lab ID"}
helperText={'Unique Identifier for a class.'}
value={editWidgetFormState.id}
/>
<TextInput 
label={'Name'}
name='name'
placeholder={'Lab Title'}
helperText={'Friendly name or Title for a class.'}
onChange={handleEditWidgetFormState}
value={editWidgetFormState.name}
/>
<TextInput 
label={'Category'}
name='category'
placeholder={'Lab Category'}
helperText={'The Category this lab belongs to.'}
onChange={handleEditWidgetFormState}
value={editWidgetFormState.category}
/>
<ReactQuill   
defaultValue=''
type='name'
name='description'  
onChange={ handleEditWidgetFormState }
value={editWidgetFormState.description }               
/>                            
</BaseForm>
);
}

Json数据：

[
{
"id": 3,
"name": "new",
"description": "some rich text data here",
"category": null,
}
]

Answer 1

我认为这是因为ReactQuill发送的事件对象与常规输入不同，所以不能基于e.target.name设置属性。它只是发送value道具作为onChange道具处理程序的输入。

https://github.com/zenoamaro/react-quill

您应该只使用一个单独的onChange函数来专门设置它。

const handleQuillEdit = (value) => {
setEditWidgetFormState((prev) => {
return {
...prev,
description: value
}
})
}
return (
<ReactQuill   
defaultValue=''
onChange={ handleQuillEdit }
value={editWidgetFormState.description }               
/>      
)

Answer 2

React Quill用4个参数调用onChange()：html，delta，source，editor:
1html：编辑器内容为html格式，字符串
2delta编辑器内容为delta对象，Quill的内部和推荐格式
3source；用户"；，变化的根源。源可以是"；用户"api"；，或"；静音">
4编辑器：对受限Quill编辑器的引用，该编辑器提供了几种方法：getBounds:ƒ

您可以在处理程序中执行this.setState({ editorHtml: html })，如下所示：

handleChange = ( html, delta, source, editor) => {
this.setState({ editorHtml: html });
};