尝试访问表单数据时发生合成事件错误

Question

我的react 组件中有以下代码

import React, { useState } from "react";
function CreateArea() {
var [items,setitems]=useState({title:{},content:""});
function updatef(event){
console.log(event);
}
return (
<div>
<form>
<input name="title" onChange={updatef} placeholder="Title" />
<textarea name="content" onChange={updatef} placeholder="Take a note..." rows="3" />
<button>Add</button>
</form>
</div>
);
}
export default CreateArea;

正如你所看到的，如果用户在输入框和文本区域输入，我试图触发updatef函数，但我收到了以下警告

警告：由于性能原因，会重用此合成事件。如果如果您看到此消息，您正在访问上的属性target已发布/无效的合成事件。这被设置为null。如果必须保留原始合成事件，使用event.persist((.

我的event.target也为null我想访问输入和文本区域值并存储它们，但event.target被设置为空

有什么帮助吗？

Answer 1

您可能需要声明一个箭头函数作为处理程序：

<input name="title" onChange={e => updatef(e)} placeholder="Title" />
<textarea name="content" onChange={e => updatef(e)} placeholder="Take a note..." rows="3" />

Answer 2

下面的代码将帮助您使用event.persist()，它将删除合成事件错误

onChange={(event) => {
event.persist();
setState((preValue) => {
return { ...preValue, input: e.target.value };
});
}}