如何使用反应挂钩创建带有参数的受控输入并传递事件对象？

Question

我正在尝试创建一个表单并创建受控输入，我之前使用过 window.event 但这个已被弃用，我不想再使用它了，如果我使用它，解决方案可以作为我例外我担心兼容性，但如果我不使用它，我尝试使用 syntheticEvent 但它不起作用，我尝试了两种方法我使用 .bind() 添加事件但不起作用给出错误无法访问输入，在初始化之前设置输入，在第二次使用 SyntheticEvent (e)=>{changeHandler} 当我写第二个字母时，它崩溃并出现错误，无法读取属性 id of null，这是怎么回事，这可能与钩子有关，还是我应该使用类?

 const changeHandler = (inputs, setInputs, clone, event) => {
      const cloned = clone(inputs[event.target.id]);
      cloned.config.value=event.target.value;
      setInputs(prevState=>{
          return {
              ...prevState,
              [event.target.id]:cloned
          }
      })
  };

使用 useState 输入配置我将其作为道具传递给我的自定义输入组件

  const [inputs, setInputs] = useState({
    username: {
      config: {
        type: "text",
        placeholder: "John Doe",
        id: "username",
        value: "",
        onChange: changeHandler.bind(this,inputs,setInputs,cloneDeep)
      },
      label: {
        label: "Username *",
        htmlFor: "username",
      },
    },
    email: {
      config: {
        type: "email",
        placeholder: "johndoe@example.com",
        id: "email2",
        value: "",
        onChange: (e) => {
          changeHandler(inputs, setInputs, cloneDeep,e);
        },
      },
      label: {
        label: "E-mail *",
        htmlFor: "email2",
      },
    },
  });

编辑：出于性能原因重用此合成事件。如果你看到这个，你正在访问属性 target 上的 released/nullified 合成事件。这被设置为空。如果您必须保留原始合成事件，请使用 event.persist().

使用 event.persist() 解决了问题，但我想知道是否可以使用它？

Answer 1

我能够使用 event.persist() 修复它，这可以防止原始事件无效，这就是为什么第二次触发事件时我收到有关尝试访问属性的错误的原因空

如何使用反应挂钩创建带有参数的受控输入并传递事件对象？

How to create controlled inputs with parameters and passing event object using react hooks?

reactjs

controlled-component