如何在另一个组件中获取Redux表单数据

Question

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

这是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);

我怎样才能将这些输入的数据传递给app.js？

Answer 1

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

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

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)