如何在使用react/redux编辑表单时显示输入中的当前值

在使用React和Redux进行表单编辑时，显示输入中的当前值通常涉及到以下几个基础概念：

React组件状态：React组件有自己的状态（state），用于存储和管理组件的数据。
Redux状态管理：Redux是一个用于JavaScript应用的状态管理库，它提供了一个中央存储（store），用于存储整个应用的状态。
受控组件：在React中，表单元素通常被设置为受控组件，这意味着它们的值由组件的状态或Redux store中的数据控制。

类型

展示型组件：只负责渲染UI，不处理状态逻辑。
容器型组件：负责连接Redux store和展示型组件，处理状态逻辑。

应用场景

任何需要管理复杂状态的表单应用都可以使用React和Redux。例如，用户注册表单、商品编辑表单等。

示例代码

以下是一个简单的示例，展示如何使用React和Redux来显示输入中的当前值：

Redux Store设置

// store.js
import { createStore } from 'redux';

const initialState = {
  inputValue: ''
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_INPUT_VALUE':
      return { ...state, inputValue: action.payload };
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

React组件

// FormComponent.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function FormComponent() {
  const inputValue = useSelector(state => state.inputValue);
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_INPUT_VALUE', payload: event.target.value });
  };

  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      <p>Current Value: {inputValue}</p>
    </div>
  );
}

export default FormComponent;

连接Redux Store

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import FormComponent from './FormComponent';

ReactDOM.render(
  <Provider store={store}>
    <FormComponent />
  </Provider>,
  document.getElementById('root')
);