如何在另一个组件中访问redux表单值

Question

我使用Redux-Form 7.3.0.我试图在另一个组件中获取我的表单的值.我在Redux表单的网站上阅读了该说明,但没有奏效.

this is the code of my componenet:

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

    class Test extends React.Component {
      render() {
        console.log(this.props);
        return (
          <div>
            test
            {this.props.title}      
          </div>
        );
      }
    }

    const selector = formValueSelector('NewPostForm');

    Test = connect(
      state => ({
        title: selector(state, 'title')
      })
    )(Test)

    export default Test;

这是我的表单组件:

从'react'导入React; 从'redux-form'导入{Field,reduxForm};

class NewPost extends React.Component {

    renderField(field) {          
        return (
            <div>
                <label>{field.label}</label>
                <input type="text"  {...field.input} />
            </div>
        );
    }

    showResults(values) {

        window.alert(`You submitted:\n\n${JSON.stringify(values, null, 2)}`);
    }

    render() {

        const { pristine, submitting, handleSubmit } = this.props;
        return (
            <form onSubmit={handleSubmit(this.showResults)} >
                <div>
                    <Field
                        label='Title'
                        name='title'
                        component={this.renderField}
                    />

                    <button type='submit' disabled={submitting}>
                        Submit the from :)
                    </button>                        
                </div>
            </form>
        );
    }
}



export default reduxForm({ form: 'NewPostForm'})(NewPost);

但我总是得到

title:undefined

我在这里找到了同样的问题,但它对我没有帮助.

Answer 1

您的测试组件有两个来自"redux-form"的导入.请把它做成一个,像这样:

import { Field, reduxForm, formValueSelector } from 'redux-form'

如果您的NewPost组件随时卸载,可能通过在导航期间更改视图或某些内容,表单的状态将被破坏.您可以通过将具有false值的destroyOnUnmount属性添加到reduxForm包装器来避免此类默认行为:

export default reduxForm({
   form: 'NewPostForm',
   destroyOnUnmount: false
})(NewPost)

如果这对您没有帮助,请提供有关如何使用组件的更好背景信息.

更新:我举了一个例子来定义4个组件:

• NewPost.js:这是使用redux-form连接到商店的表单.
• ShowPost.js:当您点击提交按钮时,显示表单捕获的内容(帖子).此数据设置为NewPost内部状态,然后作为prop传递.
• ShowPostFromSelector.js:显示表单捕获的内容,这是由于使用了选择器formValueSelector.
• App.js:它是上面3个组件的容器,其中定义了onSubmit函数.

这是: https ://codesandbox.io/s/w06kn56wqk