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)

Answer 2

上面提到的答案是绝对正确的，但是，当您的表单组件被卸载时，状态可能会被破坏，然后在任何其他组件中将不可用。要解决此问题，您可以在您的reduxForm包装器中添加sum像这样

slice

现在，您可以按照上述答案获取任何组件中的表单数据。希望这会有所帮助

如何在另一个组件

2 个答案: