如何从银行账户提交表单获取输入值并存入Redux Store变量

嘿，我来帮你解决把表单输入同步到Redux Store的问题！咱们一步步来，先把现有代码里的小问题修正，再完成表单和Redux的联动～

第一步：先修复Redux Reducer的语法错误 #

你当前的addUserReducer里，case的写法有语法问题——case:应该改成case "ACTION_NAME":（冒号在字符串后面），不然会直接报错。另外，我们可以把action封装成函数，让代码更整洁。修改后的client.js如下：

import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import React from 'react';
import ReactDOM from 'react-dom/client';
import Form from './form';

// 定义Action Creators，简化dispatch操作
export const changeFirstName = (payload) => ({
  type: "CHANGE_FIRSTNAME",
  payload
});

export const changeLastName = (payload) => ({
  type: "CHANGE_LASTNAME",
  payload
});

export const changeEmailId = (payload) => ({
  type: "CHANGE_EMAILID",
  payload
});

export const changeIBAN = (payload) => ({
  type: "CHANGE_IBAN",
  payload
});

export const changeBankName = (payload) => ({
  type: "CHANGE_BANKNAME",
  payload
});

const addUserReducer = (state = {}, action) => {
  switch(action.type){
    case "CHANGE_FIRSTNAME":
      return {...state, firstname: action.payload };
    case "CHANGE_LASTNAME":
      return {...state, lastname: action.payload };
    case "CHANGE_EMAILID":
      return {...state, emailid: action.payload };
    case "CHANGE_IBAN":
      return {...state, iban: action.payload };
    case "CHANGE_BANKNAME":
      return {...state, bankname: action.payload };
    default:
      return state;
  }
}

const reducers = combineReducers({ 
  addUser: addUserReducer 
});

const store = createStore(reducers);

// 用Provider包裹根组件，让所有子组件能访问Redux Store
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <Form />
  </Provider>
);

store.subscribe(() => {
  console.log('Store changed', store.getState());
});

第二步：改造Form组件，实现输入同步到Redux #

接下来修改form.js，我们需要用react-redux的connect函数，把Redux的dispatch方法注入到组件里，然后给每个输入框添加onChange事件，在事件触发时dispatch对应的action：

import React, { Component } from "react";
import "./form.css";
import { connect } from 'react-redux';
import { changeFirstName, changeLastName, changeEmailId, changeIBAN, changeBankName } from './client';

class Form extends Component {
  render() {
    const { dispatch } = this.props;
    return (
      <div>
        <div id="center">
          <form>
            <div className="form-group">
              <label htmlFor="firstname">First Name:</label>
              <input 
                type="text" 
                className="form-control" 
                id="firstname" 
                onChange={(e) => dispatch(changeFirstName(e.target.value))}
              />
            </div>
            <div className="form-group">
              <label htmlFor="lastname">Last Name:</label>
              <input 
                type="text" 
                className="form-control" 
                id="lastname" 
                onChange={(e) => dispatch(changeLastName(e.target.value))}
              />
            </div>
            <div className="form-group">
              <label htmlFor="email">Email address:</label>
              <input 
                type="email" 
                className="form-control" 
                id="email" 
                onChange={(e) => dispatch(changeEmailId(e.target.value))}
              />
            </div>
            <div className="form-group">
              <label htmlFor="bankacc">IBAN:</label>
              <div id="deletebank" className="items">
                <input 
                  type="text" 
                  className="form-control" 
                  id="bankacc" 
                  onChange={(e) => dispatch(changeIBAN(e.target.value))}
                />
                <button type="button" className="btn btn-default btn-sm">
                  <span className="glyphicon glyphicon-trash" />
                </button>
              </div>
            </div>
            <div className="form-group">
              <label htmlFor="bankname">Bank Name:</label>
              <input 
                type="text" 
                className="form-control" 
                id="bankname" 
                onChange={(e) => dispatch(changeBankName(e.target.value))}
              />
            </div>
            <div className="form-group">
              <button type="button" className="btn addbank">
                + Add bank account
              </button>
            </div>
            <div className="form-group">
              <button type="button" className="btn btn-success">
                Submit
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

// 用connect连接组件和Redux
export default connect()(Form);

关键细节说明 #

• 我把输入框的type修正了：比如type="firstname"是无效的，应该改成type="text"（邮箱保持type="email"）。
• 把label的for属性改成了htmlFor——这是React里的规范写法，避免和JavaScript的for循环关键字冲突。
• 通过connect()(Form)，组件会自动获得dispatch属性，我们可以直接用它来触发Redux action。
• 每个输入框的onChange事件会实时获取输入值，然后dispatch对应的action，Redux reducer会更新Store里的状态。

现在你可以测试一下：在输入框里输入内容，打开浏览器控制台，就能看到store.subscribe打印出更新后的Store状态啦～

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