如何用动态键名设置React状态？表单双向绑定优化咨询

Great question! Let's break this down step by step to address your concerns.

1. Is your current state update approach optimal? #

No—your current code violates React's core principle of state immutability, which can lead to subtle bugs and broken optimizations. Here's why:

• The ...this.state creates a shallow copy of your state object, but the form property still references the original state's form object.
• When you do updatedState.form[event.target.id] = event.target.value, you're directly mutating the original state's form object instead of creating a new one. This can cause React to miss state changes (especially if using PureComponent or custom shouldComponentUpdate logic) and make debugging harder.

2. Can we simplify the code without overcomplicating it? #

Absolutely! We can fix the immutability issue and streamline the code at the same time. Here's an optimized version:

inputChangedHandler = (event) => {
  const { id, value } = event.target;
  this.setState(prevState => ({
    isDirty: true,
    form: {
      ...prevState.form,
      [id]: value
    }
  }));
}

Key improvements:

• Uses functional setState to ensure we're working with the latest state (avoids issues with stale state closures).
• Creates a new form object with the updated field using object spread, preserving immutability.
• Destructures id and value from event.target for cleaner, more readable code.

If you want to go even more concise (while keeping readability):

inputChangedHandler = ({ target: { id, value } }) => 
  this.setState(prev => ({ isDirty: true, form: { ...prev.form, [id]: value } }));

3. How to avoid repeating this code across multiple forms? #

Repeating form state logic is a common pain point—here are three scalable solutions tailored to different use cases:

Option 1: Custom Hook (for functional components)

If you're using or migrating to functional components (React's recommended approach), create a reusable useForm hook:

import { useState } from 'react';

function useForm(initialFormState) {
  const [form, setForm] = useState(initialFormState);
  const [isDirty, setIsDirty] = useState(false);

  const handleChange = ({ target: { id, value } }) => {
    setForm(prev => ({ ...prev, [id]: value }));
    setIsDirty(true);
  };

  const resetForm = () => {
    setForm(initialFormState);
    setIsDirty(false);
  };

  return { form, isDirty, handleChange, resetForm };
}

Use it in any form component like this:

function UserForm() {
  const { form, isDirty, handleChange, resetForm } = useForm({
    username: '',
    firstName: '',
    lastName: ''
  });

  return (
    <form>
      <input id="username" value={form.username} onChange={handleChange} />
      <input id="firstName" value={form.firstName} onChange={handleChange} />
      <input id="lastName" value={form.lastName} onChange={handleChange} />
      <button type="button" onClick={resetForm}>Reset</button>
    </form>
  );
}

Option 2: Higher-Order Component (HOC) for class components

If you're sticking with class components, wrap your form logic in a HOC to inject state and handlers:

import React from 'react';

const withForm = (WrappedComponent, initialForm) => {
  return class FormWrapper extends React.Component {
    state = {
      form: initialForm,
      isDirty: false
    };

    handleChange = ({ target: { id, value } }) => {
      this.setState(prev => ({
        isDirty: true,
        form: { ...prev.form, [id]: value }
      }));
    };

    resetForm = () => {
      this.setState({ form: initialForm, isDirty: false });
    };

    render() {
      return (
        <WrappedComponent
          {...this.props}
          form={this.state.form}
          isDirty={this.state.isDirty}
          handleChange={this.handleChange}
          resetForm={this.resetForm}
        />
      );
    }
  };
};

Attach it to your class component:

class UserForm extends React.Component {
  render() {
    const { form, isDirty, handleChange } = this.props;
    return (
      <form>
        <input id="username" value={form.username} onChange={handleChange} />
        {/* Other form fields */}
      </form>
    );
  }
}

export default withForm(UserForm, { username: '', firstName: '', lastName: '' });

Option 3: Use a dedicated form library

For complex forms (with validation, field dependencies, or submission logic), use a battle-tested library to eliminate boilerplate entirely:

• Formik: Lightweight, API-friendly, and supports both class and functional components. It handles state, validation, and submission out of the box.
• React Hook Form: Performance-focused, hook-based library that minimizes unnecessary re-renders.

Example with Formik:

import { Formik, Form, Field } from 'formik';

function UserForm() {
  return (
    <Formik
      initialValues={{ username: '', firstName: '', lastName: '' }}
      onSubmit={(values) => console.log('Submitted:', values)}
    >
      {({ isDirty }) => (
        <Form>
          <Field name="username" />
          <Field name="firstName" />
          <Field name="lastName" />
          <button type="submit">Submit</button>
          <p>Form is dirty: {isDirty ? 'Yes' : 'No'}</p>
        </Form>
      )}
    </Formik>
  );
}

Final Takeaways #

• Always avoid mutating state directly—preserve immutability to keep React state predictable.
• Reuse form logic with hooks or HOCs for simple cases, or use a library for complex forms to save time and reduce errors.

内容的提问来源于stack exchange，提问作者Sean