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

Question

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

 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。这设置为空。如果您必须保留原始合成事件，请使用event.persist()。

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

Answer 1

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