Свойство Имя изменения состояния маркера ручки реагирования не определено - PullRequest
Новая
       62

Свойство Имя изменения состояния маркера ручки реагирования не определено

1 голос
/ 02 апреля 2020

Я пытался интегрировать свое приложение реакции с иглой, чтобы обеспечить область ввода текста. Я никогда не использовал перо раньше, поэтому я не уверен, что мне нужно отдельное изменение ручки вне моего оригинала. Я могу просто получить данные из моего 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,
    }
]

1 Ответ

1 голос
/ 02 апреля 2020

Я думаю, это потому, что 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 }               
   />      
)
...