1

我正在尝试制作一个表单并创建受控输入，我以前使用过window.event，但这已被弃用，我不想再使用它了我不使用它，我尝试使用syntheticEvent但它不起作用，我尝试了两种方法我使用.bind（）添加事件这不起作用给出了无法访问输入的错误，在初始化之前设置输入，在第二个使用 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()解决了问题，但我想知道可以使用它吗？

4

1 回答 1

0

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

于 2020-10-22T19:31:06.227 回答