不使用redux-form，如何通过handleChange获取表单标题与内容并在容器中分发

没问题，我来帮你搞定这个不用redux-form的表单状态管理需求！核心思路是让你的handleChange函数接收字段名称和对应的值，这样就能灵活处理title和content的更新，同时在容器组件里统一管理表单状态和提交逻辑。

第一步：调整子组件（AddPost）的表单绑定 #

让子组件接收title、content、handleChange和handleSubmit这些props，在表单元素的onChange事件里传递字段名和输入值：

// ../components/Posts/AddPost.js
import React from 'react';

const AddPost = ({ title, content, handleChange, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      {/* 标题输入框 */}
      <input
        type="text"
        value={title}
        onChange={(e) => handleChange('title', e.target.value)}
        placeholder="请输入标题"
        required
      />
      {/* 内容文本域 */}
      <textarea
        value={content}
        onChange={(e) => handleChange('content', e.target.value)}
        placeholder="请输入内容"
        rows="5"
        required
      />
      <button type="submit">发布文章</button>
    </form>
  );
};

export default AddPost;

第二步：完善容器组件的逻辑 #

在容器组件里，通过mapDispatchToProps定义handleChange函数，它会分发updateNewPost action来更新Redux状态；同时定义handleSubmit来处理表单提交、分发创建文章的action：

// 你的容器文件
import { connect } from "react-redux";
import AddPost from "../components/Posts/AddPost";
import { updateNewPost, clearNewPost } from "../actions/new-post";
import { createPost } from "../actions/posts";

// 注意：这里假设你的Redux state里，title和content是放在`newPost`这个子状态下的
// 如果你的state结构是直接把title、content放在根state，就调整这里的解构
const mapStateToProps = ({ newPost, auth }) => {
  return {
    title: newPost.title,
    content: newPost.content,
    // 如果创建文章需要用户信息，这里可以从auth里取
    userId: auth.userId
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    // 通用的handleChange：接收字段名和值，分发更新action
    handleChange: (field, value) => {
      dispatch(updateNewPost(field, value));
    },
    // 表单提交逻辑
    handleSubmit: (e) => {
      e.preventDefault();
      const { title, content, userId } = ownProps;
      // 分发创建文章的action，把title和content传进去
      dispatch(createPost({ title, content, userId }));
      // 提交后清空表单状态
      dispatch(clearNewPost());
    }
  };
};

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

第三步：配套调整Action和Reducer #

确保你的updateNewPost action和对应的reducer能正确处理字段更新：

new-post action文件：

// ../actions/new-post.js
export const updateNewPost = (field, value) => {
  return {
    type: 'UPDATE_NEW_POST',
    payload: { field, value }
  };
};

export const clearNewPost = () => {
  return {
    type: 'CLEAR_NEW_POST'
  };
};

new-post reducer文件：

// ../reducers/new-post.js
const initialState = {
  title: '',
  content: ''
};

const newPostReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'UPDATE_NEW_POST':
      // 使用计算属性名，动态更新对应的字段
      return {
        ...state,
        [action.payload.field]: action.payload.value
      };
    case 'CLEAR_NEW_POST':
      return initialState;
    default:
      return state;
  }
};

export default newPostReducer;

关键说明 #

• 这种方式通过通用的handleChange函数，避免了为每个表单字段写单独的change处理逻辑，扩展性很强，后续加其他字段也不用改函数结构。
• 容器组件负责所有和Redux交互的逻辑，子组件只做纯UI渲染，符合React的组件职责分离原则。
• 如果你的Redux state结构和我假设的不一样（比如title、content直接在根state），只需要调整mapStateToProps里的解构逻辑即可。

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