反应组件中重复的 onInput 处理程序

Question

我有一个如下所示的 react 组件。

表单输入由onInputChange函数处理，表单提交由onFormSubmit处理

function RegisterForm() {
  // formData stores all the register form inputs.
  const [formData, setFormData] = useState(registerDefault);
  const [errors, posting, postData] = useDataPoster();

  function onInputChange(event: ChangeEvent<HTMLInputElement>) {
    let update = { [event.target.name]: event.target.value };

    setFormData(oldForm => Object.assign(oldForm, update));
  }

  function onFormSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    const onSuccess: AxiosResponseHandler = response => {
      setFormData(Object.assign(formData, response.data));
    };

    postData("/api/register", formData, onSuccess);
  }

  return (
    <form onSubmit={onFormSubmit}>
      <FormTextInput
        name="full_name"
        label="Name"
        errors={errors.full_name}
        onChange={onInputChange}
      />
      <FormTextInput
        name="email"
        label="Email address"
        type="email"
        errors={errors.email}
        onChange={onInputChange}
      />
      <button type="submit" className="theme-btn submit" disabled={posting}>
        {posting && <span className="fas fa-spin fa-circle-notch"></span>}
        Create
      </button>
    </form>
  );
}

我的应用程序有 50 多个类似的表单，我想知道是否必须将这两个功能复制粘贴到所有其他表单上。 onInputChange 不会有任何变化，并且 url 是 onFormSubmit 中唯一的变量。

我正在考虑一种基于类的方法，将setFormData 和postData 作为属性，将相关函数作为类方法。但在这种情况下，我必须 bind 带有类实例的处理程序，以便处理程序具有有效的 this 实例。

还有其他方法可以做到这一点吗？您如何避免在所有表单组件中重复这两个代码块？

谢谢

Answer 1

您可以创建一个自定义挂钩，如下所示：

const [formState, setFormState] = useFormStateHandler({name: ''})

<input value={formState.name} onChange={event => setFormState(event, 'name')} />

定义如下所示：

export default function useFormStateHandler(initialState) {
  const [state, setState] = useState(initialState)

  const updater = (event, name) => {
    setState({...state, [name]: event.target.value})
  }

  return [state, updater]
}

Answer 2

创建一个 HOC 以将输入处理程序注入表单组件，并为 url 添加参数。

function RegisterForm(props) {
  // specific function
  const specific = () => {
    const formData = props.formData; // use passed state values
    // use form data
  }
}

function withInputHandlers(Component, params) {
  return function(props) {
      // states
      function onInputChange(...) {...}
      function onFormSubmit(...) {
        // use params.url when submitting
        postData(params.url, formData, onSuccess);
      }
      // inject input handlers to component and state values
      return (
        <Component {...props} formData={formData} onChange={onInputChange} onSubmit={onFormSubmit} />
      );
  }
}

// Usage
const EnhancedRegisterForm = withInputHandlers(
  RegisterForm,
  { url: 'register_url' } // params
);

const EnhancedSurveyForm = withInputHandlers(
  Survey,
  { url: 'survey_url' } // params
)

Answer 3

此更改可能会对您有所帮助

function RegisterForm() {
  // formData stores all the register form inputs.
  const [formData, setFormData] = useState(registerDefault);
  const [errors, posting, postData] = useDataPoster();

  const onInputChange = name => event => {
    let update = { [name]: event.target.value };

    setFormData(oldForm => Object.assign(oldForm, update));
  }

  const onFormSubmit = url => event =>{
    event.preventDefault();

    const onSuccess: AxiosResponseHandler = response => {
      setFormData(Object.assign(formData, response.data));
    };

    postData(url, formData, onSuccess);
  }

  return (
    <form onSubmit={onFormSubmit("/api/register")}>
      <FormTextInput
        name="full_name"
        label="Name"
        errors={errors.full_name}
        onChange={onInputChange("full_name")}
      />
      <FormTextInput
        name="email"
        label="Email address"
        type="email"
        errors={errors.email}
        onChange={onInputChange("email")}
      />
      <button type="submit" className="theme-btn submit" disabled={posting}>
        {posting && <span className="fas fa-spin fa-circle-notch"></span>}
        Create
      </button>
    </form>
  );
}