如何在redux forms v7中从应用程序的任何位置获取任何表单值

您将要使用 formValueSelector 从redux表单导出的。虽然您可以直接深入到状态树中并自己提取内容,但使用redux表单导出的选择器意味着您不需要依赖redux表单的任何实现细节。

您可以这样使用它:

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

class App extends React.Component {
  // ...
}

const formName = 'myForm'; // Name of form you want
const myFormValueSelector = formValueSelector(formName);

const mapStateToProps = state => ({
  name: myFormValueSelector(state, 'name') // selects the name field value
});

export default connect(mapStateToProps)(App);

您可以找到此方法的文档 here

表单值将在redux存储中提供。您可以从任何应用程序组件获得它。

迷你示例,

指数js、,

import React from 'react';
import ReactDOM from 'react-dom';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
import App from './src/components';

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

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(reducers);

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

应用程序。js、,

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

class App extends Component {
    ...
    render() {
        console.log(this.props.forms); // This fill print information about all of your app forms
        return <div />;
    }
}

function mapStateToProps(state) {
    return {
        forms: state.form;
    }
}

export default reduxForm({ 
    form: 'someForm',
})(connect(
    mapStateToProps,
    null
)(App));

应用程序内。js、, console.log 将像这样打印表单数据,

{
    someForm: {...someForm props},
    someOtherForm: {...someOtherForm props},
}