如何在 React 上触发嵌套在另一个事件函数中的事件函数？

如何解决如何在 React 上触发嵌套在另一个事件函数中的事件函数？

我正在尝试找到一种有效的方法来编写函数而不会像这样创建重复项。

const InputChange = (initialValue,validateInputChange = false,validate) => {

  const handleInputChange = (event) => {
    const { name,value } = event.target; // <- Target Name and Value
    setValues({
      ...values,[name]: value,});
  };

  const handleValidation = (event) => {
    const { name,value } = event.target; // <- Same Target Name and Value
    if (validateInputChange) {
      validate({ [name]: value });
    }
  };

  return {
    values,setValues,handleInputChange,errors,setErrors,handleValidation,};

};

我想要完成的是堆叠这两个函数，而不必像这样传递相同的目标 name 和 value 两次。

  const handleInputChange = (event) => {
    const { name,value } = event.target; // <- Target Name and Value Passed Once
    setValues({
      ...values,});
    const handleValidation = (event) => {
      if (validateInputChange) {
        validate({ [name]: value });
      }
    };
  };

我如何触发这些事件：onChange={ handleInputChange } 和 onBlur={ handleValidation }

<TextField
   name="name"
   label="Name"
   value={values.name}
   onChange={handleInputChange}
   onBlur={handleValidation} // <- This is not working: onBlur={handleInputChange(handleValidation)}?
   error={errors.name}
 />

如何在 React 上触发嵌套在另一个事件函数中的事件函数？

解决方法

您可以创建一个柯里化的辅助函数，它接受一个事件处理程序，并为其准备数据。

handleEventValue 是一个柯里化的实用函数，它接受一个处理程序，并返回一个接受和事件对象的函数。然后它调用处理程序，并将准备 { [name]: value } 对象传递给它。您应该在组件/自定义挂钩之外定义此函数。

const handleEventValue = handler => ({ target: { name,value } }) => handler({ [name]: value });

用法：

const handleInputChange = handleEventValue(val => {
  setValues({
    ...values,...val
  });
});

const handleValidation = handleEventValue(val => {
  if (validateInputChange) {
    validate(val);
  }
});

示例：

const handleEventValue = handler => ({ target: { name,value } }) => handler({ [name]: value });

const Example = () => {
  const [values,setValues] = React.useState({ x: '',y: '' });
  
  const handleInputChange = handleEventValue(val => {
    setValues({
      ...values,...val
    });
  });

  return (
    <div>
      <input name="x" value={values.x} onChange={handleInputChange} />
      
      <input name="y" value={values.y} onChange={handleInputChange} />
      
      <div>x: {values.x} y: {values.y}</div>
    </div>
  );
}

ReactDOM.render(
  <Example />,root
);

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>