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

Question

最接近这样做的是 reduxForm().getFormState()，其中没有很好的记录

Answer 1

表单值将在 redux 商店中可用。您可以从任何应用程序组件中获取它。

迷你示例，

index.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'));

app.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));

在app.js中，console.log会这样打印表单数据，

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

Answer 2

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

你这样使用它：

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-forms v7 中从我的应用程序中的任何位置获取任何表单值

How do I get any form value from anywhere in my app in redux-forms v7

javascript

ecmascript-6

reactjs

redux

redux-form