如何使用React-Redux捕获表单输入？求规范实现方案

Hey there! Let's work through your problem step by step. You mentioned you don't want to rely on third-party libraries like react-form, you're getting undefined from e.target.value, and you're unsure about the standard way to capture form inputs with React-Redux. Let's fix all that without extra dependencies.

First, Fix the e.target.value = undefined Issue #

Most of the time, this happens because you're either using a custom input component that doesn't pass through props properly, or you missed a key attribute on your native input. Here are the common fixes:

• If using a custom input component:
  If you wrapped a native <input> into your own component, you need to pass through the value, onChange, and name props to the underlying native element. Otherwise, the event target will point to your custom component instead of the real input, hence undefined value.

  Example of the correct custom input:

  const CustomInput = (props) => {
    // Spread all props to the native input
    return <input {...props} />;
  };
  

• If using native inputs directly:
  Double-check that you haven't forgotten to set the name attribute on your input. While this doesn't cause undefined on its own, it's critical for the Redux pattern we'll use later, and missing it can lead to confusion.

Standard React-Redux Form Input Implementation (No Third-Party Libraries) #

We'll use Redux Toolkit (the official, recommended way to write Redux logic) since it simplifies reducer and action creation without adding extra dependencies beyond React-Redux itself.

Step 1: Create a Redux Slice for Form State #

A slice combines your reducer and action creators into one file, making the code cleaner.

// src/features/form/formSlice.js
import { createSlice } from '@reduxjs/toolkit';

const formSlice = createSlice({
  name: 'form',
  initialState: {
    username: '',
    email: ''
    // Add other form fields here
  },
  reducers: {
    // Generic action to update any form field
    updateFormField: (state, action) => {
      const { fieldName, fieldValue } = action.payload;
      state[fieldName] = fieldValue;
    },
    // Optional: Reset the form to initial state
    resetForm: (state) => {
      state.username = '';
      state.email = '';
    }
  }
});

// Export actions to use in components
export const { updateFormField, resetForm } = formSlice.actions;
// Export reducer to add to your Redux store
export default formSlice.reducer;

Step 2: Add the Slice to Your Redux Store #

Make sure your store includes the form reducer:

// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import formReducer from '../features/form/formSlice';

export const store = configureStore({
  reducer: {
    form: formReducer
    // Add other reducers here
  }
});

Step 3: Build Your Form Component (Function Component with Hooks) #

Use useSelector to access form state and useDispatch to trigger actions. This is the modern, recommended approach for React-Redux.

// src/components/MyForm.js
import { useSelector, useDispatch } from 'react-redux';
import { updateFormField } from '../features/form/formSlice';

const MyForm = () => {
  const dispatch = useDispatch();
  // Get current form state from Redux
  const formState = useSelector(state => state.form);

  // Generic handler for all input changes
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    dispatch(updateFormField({
      fieldName: name,
      fieldValue: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Log or submit the form data
    console.log('Form data:', formState);
    // Example: send to API, reset form, etc.
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Username:</label>
        <input
          type="text"
          name="username" // Must match the field name in Redux state
          value={formState.username}
          onChange={handleInputChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email" // Must match the field name in Redux state
          value={formState.email}
          onChange={handleInputChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

For Class Components (Legacy Approach) #

If you're still using class components, use the connect function to map state and dispatch to props:

// src/components/MyClassForm.js
import React from 'react';
import { connect } from 'react-redux';
import { updateFormField } from '../features/form/formSlice';

class MyClassForm extends React.Component {
  handleInputChange = (e) => {
    const { name, value } = e.target;
    this.props.updateFormField({
      fieldName: name,
      fieldValue: value
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form data:', this.props.formState);
  };

  render() {
    const { username, email } = this.props.formState;
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Username:</label>
          <input
            type="text"
            name="username"
            value={username}
            onChange={this.handleInputChange}
          />
        </div>
        <div>
          <label>Email:</label>
          <input
            type="email"
            name="email"
            value={email}
            onChange={this.handleInputChange}
          />
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

// Map Redux state to component props
const mapStateToProps = (state) => ({
  formState: state.form
});

// Map action creators to component props
const mapDispatchToProps = {
  updateFormField
};

export default connect(mapStateToProps, mapDispatchToProps)(MyClassForm);

Key Takeaways #

• Use Redux Toolkit for cleaner, standardized Redux code (it's official and eliminates boilerplate).
• Ensure every input has a name attribute that matches the corresponding field in your Redux state—this lets you use a single generic change handler for all fields.
• For custom inputs, always pass through props like value, onChange, and name to the native input element to avoid e.target.value issues.

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