Question

我使用的是Redux-Form 7.3.0。我试图在另一个组件中获取我的表单的值。我阅读了Redux表格的website处的说明，但没有用。

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

我发现了同样的问题here，但它对我没有帮助。

Answer 1

您的测试组件有两个来自“redux-form”的导入。请把它做成一个，像这样：

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

如果 NewPost 组件随时卸载，可能通过在导航过程中更改视图或其他内容，表单的状态会被破坏。您可以通过将 destroyOnUnmount 属性与 false 值添加到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

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

1 个答案: