React中使用SunEditor如何适配动态表单？事件处理问题

错误原因 #

SunEditor的onChange回调参数和原生表单组件（如TextField）逻辑完全不同：

• 原生TextField的onChange返回原生Event对象，可通过event.target.name和event.target.value获取字段名与值
• SunEditor的onChange第一个参数直接是编辑器的内容字符串，不存在target属性，因此原代码中event.target.name会触发undefined读取错误

适配方案 #

方案一：重构事件处理函数（推荐） #

重新设计handleFormChange，直接接收字段名、内容和索引，兼容所有表单组件：

修改后的状态处理代码：

const [formFields, setFormFields] = useState(dbObject || [{section: ''}])

const handleFormChange = (fieldName, value, index) => {
    const data = [...formFields];
    data[index][fieldName] = value;
    setFormFields(data);
}

SunEditor调用方式：

{formFields.map((form, index) => {
    return (
        <div key={index}>
            <SunEditor 
                onChange={(content) => handleFormChange('section', content, index)} 
                contents={form.section}  
            />
        </div>
    )
})}

原TextField也可统一为该调用方式：

<TextField
    id="outlined-multiline-flexible"
    name='section'
    value={form.section}
    onChange={event => handleFormChange('section', event.target.value, index)}
/>

方案二：模拟原生Event对象（无需修改原处理函数） #

如果不想改动原有handleFormChange，可在SunEditor的onChange回调里构造符合原函数预期的对象：

{formFields.map((form, index) => {
    return (
        <div key={index}>
            <SunEditor 
                onChange={(content) => handleFormChange(
                    { target: { name: 'section', value: content } }, 
                    index
                )} 
                contents={form.section}  
            />
        </div>
    )
})}

此方式下原handleFormChange无需修改，因为传入的对象结构和原生Event一致，能正常读取event.target.name与event.target.value。

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