使用React Quill的Usestate和Onchange无法正常工作，不确定如何修复

Question

我有一系列文本输入字段 - 它们的输入由这样的usestate管理：

const [formFields, setFormFields] = useState([
{ textinput1: "", textinput2: "", textinput3: "", reactQuill: "" } ]);

他们的句柄更改是通过此功能管理的，因为可以添加更多的文本字段，并且添加的每个索引都必须保存其输入：

function handleChangeInput(index, event) {
    const values = [...formFields];
    values[index][event.target.name] = event.target.value
    setFormFields(values);
}

并且这就是他们的外观和功能，如预期的：

{
      formFields.map((formField, index) => (

      <React.Fragement key={index}>

      <TextField

      name='textinput1'
      value={formField.textinput1}
      onChange={event => handleChangeInput(index, event)}
      
      />
      ))
      }

但是，当我尝试使用React Quill（Rich Text Editor）输入的相同的确切逻辑时，它根本无法正常工作。因此，例如，这是行不通的：

 <ReactQuill 
    
    name="reactQuill"
    onChange={event => handleChangeInput(index, event)}
    value={formField.reactQuill}
    

    />

我会遇到“名称”的错误，而我不确定如何解决这个问题？预先感谢您是否知道如何解决此问题！

Answer 1

问题是固定的。由于React Quill Text Editor不会像其他文本字段那样返回传统事件，因此必须将我的HandleChangeInput修改为：

function handleChangeInput(index, targetName, targetValue) {
     const values = [...formFields];
     values[index][targetName] = targetValue
     setFormFields(values); }

并且必须更改文本字段的OnChange：：

onChange={event => handleChangeInput(index, event.target.name, event.target.value)}

React for React Quill必须更改为：

onChange={value => handleChangeInput(index, 'reactQuill', value)}

我希望将来对某人有所帮助！