React Quill Handle State Change Name 属性未定义答案

【问题标题】：React Quill Handle State Change Name Property is UndefinedReact Quill Handle State Change Name 属性未定义
【发布时间】：2021-05-30 21:40:26
【问题描述】：

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

是否有正确的方法来处理 react quill 更改？

我一直坚持这一点，我不确定如何继续前进。

下面是我的代码以及 json 数据。我只是希望描述字段是羽毛笔区域中包含的内容。

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,
    }
]

【问题讨论】：

发布完整的错误信息

标签： reactjs django-rest-framework material-ui

【解决方案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 }               
   />      
)

【讨论】：

是的，做到了。谢谢！

【解决方案2】：

React Quill 使用 4 个参数调用 onChange()：html、delta、源代码、编辑器：
1 html：HTML格式的编辑器内容，字符串
2 delta：编辑器内容为Delta object, Quill's internal and recommended format
3 来源：通常是“用户”，即更改的来源。来源可以是“用户”、“api”或“silent”。
4 editor：对受限制的 Quill 编辑器的引用，提供一些方法：getBounds：f ()、getContents：f ()、getHTML：f ()、getLength：f ()、getSelection：f ( ), getText: ƒ ()

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

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

【讨论】：