javascript - 辅助函数reactjs

Question

我创建了一个辅助函数来减少组件中的一些函数。因此，每当我需要该辅助函数时，我都可以在所需的组件中使用它们。我不知道正确的做法是什么，但我尝试了这种方法。我需要将 form、setForm 状态和 event 传递给辅助函数。例如。
Main.js

import { useState } from "react";
// helper
import HandleChange from "./HandleChange";

function Main() {
    const [form, setForm] = useState({
        firstName: "",
        lastName: "",
    });

    // ------> This is what I want to move to helper component.
    // function handleChange(event) {
    //   const { name, value } = event.target;

    //   setForm({
    //     ...form,
    //     [name]: value,
    //   });
    // }

    // ------> This is how I used helper component
    const handleChange = HandleChange(form, setForm, event);
    return (
        <input
            type="text"
            name="firstName"
            value={form.firstName}
            {/****** this is how I passed handleChange ******/}
            onChange={handleChange}
        />
    )
}

Helper.js

export default function HandleChange(form, setForm, event) {
  const { name, value } = event.target;

  setForm({
    ...form,
    [name]: value,
  });
}

Answer 1

您只需像这样更改 decalre handleChange 即可:

const handleChange = (event) => HandleChange(form, setForm, event);