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

Question

我一直在尝试将我的 React 应用与 quill 集成以提供文本输入区域。我以前从未使用过羽毛笔，所以我不确定是否需要在原来的 handle 之外单独更换 handle 。我可以很好地从我的 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,
    }
]

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 }               
   />      
)