reactjs - 如何在另一个组件中获取Redux Form数据

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 字段 值

所以在 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)