如何在另一个组件中获取 Redux Form 数据 [英] How to get Redux Form data in another Component

问题描述

如何从 redux 表单传递数据，以便我可以在 App.js 中访问该数据?这是我使用 redux-form 编写的代码.点击提交后，数据应该从 form.js 传递到 app.js.并且数据应该显示在页面上.

这里是 form.js-

const Form=({fields:{name,address}})=>(<表格><中心><div><label>名字</label><Field type="text" component="input" placeholder="Name" name="name"/>

<div><label>地址</label><Field type="text" component="input" placeholder="Phone" name="phone"/>

<button type="submit">提交</button></中心></表单>)导出默认 reduxForm({形式:'形式'，字段:['姓名'，'地址']})(形式);

如何将输入的数据传递给 app.js?

解决方案

你需要做的是使用getFormValues来获取redux field的值

所以在 App.js 中你可以拥有

import {getFormValues} from 'redux-form';..const App = (props) =>{var {name, phone} = props.formStates控制台日志(姓名，电话)；}函数 mapStateToProps(state) {返回 {formStates: getFormValues('form')(state)//这里的 'form' 是你给你的 redux 表单取的名字}}导出默认连接(mapStateToProps)(App)

How can i pass the data from redux form, So that i can access that data in App.js? here is the code i have written using redux-form.after i click on submit the data should be passed from form.js to app.js. and the data should be displayed on page.

here is form.js-

const Form=({fields:{name,address}})=>(
  <form>
    <center>
    <div>
      <label>First Name</label>
      <Field type="text" component="input" placeholder="Name" name="name"/>
    </div>
    <div>
      <label>Address</label>
      <Field type="text" component="input" placeholder="Phone" name="phone" />
    </div>
    <button type="submit">Submit</button>
  </center>
  </form>
)


export default reduxForm({
  form: 'form',
  fields: ['name', 'address']
})(Form);

how can i pass this inputed data to app.js?

解决方案

What you need to do is use getFormValues to get the redux field values

So in App.js you can have

import {getFormValues} from 'redux-form';

..
const App = (props) => {
      var {name, phone} = props.formStates
      console.log(name, phone);
}

function mapStateToProps(state) {
    return {
         formStates: getFormValues('form')(state) // here 'form' is the name you have given your redux form 
    }
}

export default connect(mapStateToProps)(App)

这篇关于如何在另一个组件中获取 Redux Form 数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！