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 已发布/无效的合成事件。设置为空。如果你必须要保留原始的合成事件，请使用event.persist（）。

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

有什么帮助吗？

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 };
  });
}}

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

2 个答案: