React中useState+onChange处理ReactQuill输入报错如何解决

React Quill 组件的onChange回调逻辑和常规表单TextField组件完全不同：

• 普通TextField的onChange会传入标准React合成事件对象，可通过event.target.name、event.target.value读取字段名和输入值，这也是原有逻辑能正常运行的原因
• ReactQuill的onChange第一个参数直接是编辑器当前的富文本内容字符串，不存在event.target属性，原有逻辑读取event.target.name时自然会抛出未定义错误。

通过小幅度改造处理函数、调整ReactQuill绑定逻辑即可解决问题，不需要改动原有普通TextField的代码：

• 改造通用输入变更处理函数，同时兼容普通输入框的事件对象传参、ReactQuill的显式值传参，同时修正原逻辑里浅拷贝状态对象的隐患：

function handleChangeInput(index, fieldNameOrEvent, fieldValue) {
  const values = [...formFields];
  let targetField, targetValue;

  // 区分是普通输入框传的事件对象，还是ReactQuill传的显式参数
  if (fieldNameOrEvent?.target) {
    targetField = fieldNameOrEvent.target.name;
    targetValue = fieldNameOrEvent.target.value;
  } else {
    targetField = fieldNameOrEvent;
    targetValue = fieldValue;
  }

  // 新建对象替换对应索引项，避免直接修改原状态引用导致的更新不触发问题
  values[index] = {
    ...values[index],
    [targetField]: targetValue
  };
  setFormFields(values);
}

• 调整ReactQuill组件的onChange绑定逻辑，显式传入字段名和内容值，修正原有Fragment拼写错误：

{
  formFields.map((formField, index) => (
    <React.Fragment key={index}>
      {/* 原有普通TextField代码不需要任何修改 */}
      <TextField
        name='textinput1'
        value={formField.textinput1}
        onChange={event => handleChangeInput(index, event)}
      />
      {/* 调整后的ReactQuill组件 */}
      <ReactQuill 
        name="reactQuill"
        value={formField.reactQuill}
        onChange={(content) => handleChangeInput(index, 'reactQuill', content)}
      />
    </React.Fragment>
  ))
}

• ReactQuill返回的content是带HTML标签的富文本字符串，和普通文本框返回的纯文本内容格式不同，如果后续要做内容长度校验、提交过滤，需要单独处理HTML标签
• 原逻辑里直接修改values[index][xxx]的写法属于直接修改状态引用，部分场景下可能导致React不触发重渲染，改造后的写法规避了这个问题
• 原有示例代码里的React.Fragement是拼写错误，正确写法是React.Fragment，如果不修正也会抛出组件未定义的错误

内容的提问来源于stack exchange，提问作者Gabriel