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

Question

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

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,
      [name]: value,
    });
    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 上触发嵌套在另一个事件函数中的事件函数？

Answer 1

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

handleEventValue 是一个接受处理程序的柯里化实用函数，returns 是一个接受事件对象的函数。然后调用处理程序，并将 prepare { [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>

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

How do I trigger an event function nested in another event function on React?

events

nested

onchange

reactjs

react-hooks