如何在redux中获取<Field>值-form 7.0.0

在redux中获取<Field>值，需要使用redux-form库来处理表单数据。redux-form是一个用于处理表单状态的Redux扩展库，它提供了一种简单的方式来管理表单数据，并将其存储在Redux store中。

以下是在redux中获取<Field>值的步骤：

首先，确保你已经安装了redux-form库，并将其集成到你的应用程序中。
在你的Redux store中，使用redux-form的reducer来处理表单数据。你可以通过将formReducer导入并添加到你的根reducer中来实现这一点。

import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';

const rootReducer = combineReducers({
  form: formReducer
});

export default rootReducer;

在你的组件中，使用redux-form的Field组件来渲染表单字段。Field组件接受一个name属性，用于指定字段的名称。

import React from 'react';
import { Field } from 'redux-form';

const MyForm = () => {
  return (
    <form>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      {/* 其他表单字段 */}
    </form>
  );
};

export default MyForm;

在你的组件中，使用redux-form的connect函数来连接表单组件到Redux store。这将使表单组件能够访问Redux store中的表单数据。

import React from 'react';
import { connect } from 'react-redux';
import { Field, reduxForm } from 'redux-form';

const MyForm = (props) => {
  // 通过props获取表单值
  const { handleSubmit, pristine, submitting, values } = props;

  const onSubmit = (data) => {
    // 处理表单提交
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" component="input" type="text" />
      </div>
      {/* 其他表单字段 */}
      <button type="submit" disabled={pristine || submitting}>
        Submit
      </button>
    </form>
  );
};

// 使用reduxForm高阶函数包装表单组件
const MyFormContainer = reduxForm({
  form: 'myForm' // 表单名称
})(MyForm);

// 使用connect函数连接表单组件到Redux store
export default connect()(MyFormContainer);

现在，你可以在<Field>组件中使用name属性来指定字段的名称，并通过props获取表单值。例如，你可以在onSubmit函数中访问values属性来获取整个表单的值。

这是一个基本的示例，你可以根据你的具体需求进行调整和扩展。关于redux-form的更多详细信息和用法，请参考redux-form官方文档。