时间戳

首页 > 解决方案 > React Quill Handle State Change Name 属性未定义

reactjs - React Quill Handle State Change Name 属性未定义

问题描述

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

是否有正确的方法来处理反应羽毛笔的变化？

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

下面是我的代码以及 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,
    }
]

标签： reactjsdjango-rest-frameworkmaterial-ui

解决方案

我认为这是因为 ReactQuill 不会发送与常规输入相同的事件对象，因此您无法设置基于e.target.name. 它只是将value道具作为onChange道具处理程序的输入发送。

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

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

const handleQuillEdit = (value) => {
  setEditWidgetFormState((prev) => {
    return {
      ...prev,
      description: value
    }
  })
}

return (
  <ReactQuill   
    defaultValue=''
    onChange={ handleQuillEdit }
    value={editWidgetFormState.description }               
   />      
)

推荐阅读