在React应用中使用Redux获取文本输入框值的相关问题

完全可以向Redux Action传参并存储对应的值，这是Redux的标准用法，你要实现的功能可以按照以下步骤操作：

1. 定义带载荷的Action #

首先创建允许接收输入内容作为参数的Action，将输入内容放在Action的payload字段传递给Reducer：

// 先统一定义Action类型，避免拼写错误
const SEND_CHAT_MSG = 'SEND_CHAT_MSG';

// 定义Action创建函数，接收输入内容作为入参
export const sendChatMsg = (inputContent) => ({
  type: SEND_CHAT_MSG,
  payload: {
    content: inputContent,
    time: Date.now()
  }
});

2. 编写对应Reducer处理逻辑 #

在Reducer中接收Action传递的参数，将内容存入Redux全局状态：

import { SEND_CHAT_MSG } from './actionTypes';

const initialState = {
  msgList: [] // 存储所有聊天消息，用于渲染留言板
};

const chatReducer = (state = initialState, action) => {
  switch (action.type) {
    case SEND_CHAT_MSG:
      return {
        ...state,
        // 将新消息追加到消息列表末尾
        msgList: [...state.msgList, action.payload]
      };
    default:
      return state;
  }
};

export default chatReducer;

3. 组件中调用Action传参 #

输入框的临时输入值不需要立刻存入Redux，用组件内部的useState存储即可，点击发送按钮时再将值传入Action触发全局状态更新：

import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { sendChatMsg } from './store/chatActions';

function ChatPage() {
  const dispatch = useDispatch();
  // 从Redux中取出消息列表渲染留言板
  const msgList = useSelector(state => state.chat.msgList);
  // 组件内部状态存储输入框临时值
  const [inputVal, setInputVal] = useState('');

  const handleSend = () => {
    // 过滤空内容
    if (!inputVal.trim()) return;
    // 将输入值传入Action触发更新
    dispatch(sendChatMsg(inputVal.trim()));
    // 发送后清空输入框
    setInputVal('');
  };

  return (
    <div className="chat-wrap">
      {/* 留言板区域 */}
      <div className="msg-board">
        {msgList.map((item, idx) => (
          <div key={idx} className="msg-item">
            {item.content}
          </div>
        ))}
      </div>
      {/* 输入操作区域 */}
      <div className="input-bar">
        <input
          type="text"
          value={inputVal}
          onChange={(e) => setInputVal(e.target.value)}
          placeholder="请输入聊天内容"
        />
        <button onClick={handleSend}>发送</button>
      </div>
    </div>
  );
}

export default ChatPage;

可选方案 #

如果你的业务场景需要跨组件同步输入框的内容，也可以单独定义一个更新输入值的Action，在输入框的onChange事件中触发，把实时输入的内容存入Redux，发送时直接从Redux读取该值即可。没有这类需求的话用组件内部状态存临时输入值的方案性能更高，不需要触发多余的全局状态更新。 #

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