useState和onChange与React Quill不工作，因为我想要它，不知道如何修复 &g

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(富文本编辑器)输入相同的逻辑时，它根本不起作用。例如:

<ReactQuill 

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

/>

我得到一个错误"name"未定义，我不确定如何解决这个问题?提前谢谢如果有人知道如何解决这个问题!

Answer 1

问题已修复。由于React Quill文本编辑器不像其他文本字段那样返回传统事件，因此必须将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 Quill的onChange必须更改为:

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

我希望这对将来的人有所帮助!