React-使用动态设置的键使用setField模式

可以通过使用useState和useCallback来动态设置键的自定义hook来解决这个问题。下面是示例代码：

import React, { useState, useCallback } from 'react';

function useFormFields(initialState) {
  const [fields, setFields] = useState(initialState);

  const handleFieldChange = useCallback((event) => {
    const { name, value } = event.target;
    setFields((prevFields) => ({
      ...prevFields,
      [name]: value,
    }));
  }, []);

  return [fields, handleFieldChange];
}

function MyForm() {
  const [formData, setFormData] = useState({});

  const handleFormSubmit = useCallback((event) => {
    event.preventDefault();
    console.log(formData);
  }, [formData]);

  const [fields, handleFieldChange] = useFormFields({
    username: '',
    password: '',
  });

  const handleFormChange = useCallback((event) => {
    handleFieldChange(event);
    setFormData((prevFormData) => ({
      ...prevFormData,
      [event.target.name]: event.target.value,
    }));
  }, [handleFieldChange]);

  return (
    <form onSubmit={handleFormSubmit}>
      <label>
        Username:
        <input
          type="text"
          name="username"
          onChange={handleFormChange}
          value={fields.username}
        />
      </label>
      <label>
        Password:
        <input
          type="password"
          name="password"
          onChange={handleFormChange}
          value={fields.password}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

这段代码使用了自定义hook useFormFields 来设置初始值，并且在处理表单事件时使用了useCallback来动态设置键。