我一直在尝试将我的 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,
}
]
最佳答案
我想是因为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 }
/>
)
关于reactjs - React Quill 句柄状态更改名称属性未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60996344/