reactjs – 如何从Child组件调度动作三级?

前端之家收集整理的这篇文章主要介绍了reactjs – 如何从Child组件调度动作三级?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正在面对设计一个React应用程序的这个问题,而我似乎无法找到答案.

因此,我的应用程序具有以下反应路由器中组件的历史

应用
– > DynamicContainer
– > – > LoginComponent

现在,LoginComponents具有使用用户名和密码的表单元素.

我有userActionCreators处理登录名,并且在完成时调度登录成功,但我似乎找不到正确的方法来连接我的LoginComponent来调度操作或调用actionCreators.

我该怎么做?任何建议将不胜感激.

一个选项是通过连接将单一用途表单绑定到其操作.由于< LoginComponent />通常总是做同样的事情,你可以这样使用:
  1. import React from 'react';
  2. import * as userActionCreators from '../actions/users';
  3. import { connect } from 'react-redux';
  4.  
  5. export class LoginComponent extends React.Component {
  6. static propTypes = {
  7. login: React.PropTypes.func.isrequired
  8. }
  9.  
  10. render() {
  11. const { login } = this.props;
  12. const { username,password } = this.state;
  13.  
  14. return (
  15. <form onSubmit={ () => login(username,password) }>
  16. ...
  17. </form>
  18. );
  19. }
  20. }
  21.  
  22. export default connect(null,userActionCreators)(LoginComponent);

连接自动绑定动作创建者并单独提供派驻到道具,所以如果你想更加明确,上面的例子是相同的

  1. import React from 'react';
  2. import { login } from '../actions/users';
  3. import { connect } from 'react-redux';
  4.  
  5. export class LoginComponent extends React.Component {
  6. static propTypes = {
  7. dispatch: React.PropTypes.func.isrequired
  8. }
  9.  
  10. render() {
  11. const { login,dispatch } = this.props;
  12. const { username,password } = this.state;
  13.  
  14. return (
  15. <form onSubmit={ () => dispatch(login(username,password)) }>
  16. ...
  17. </form>
  18. );
  19. }
  20. }
  21.  
  22. export default connect()(LoginComponent);

并作为参考,userActionCreators:

  1. const LOGIN_SUCCESS = 'LOGIN_SUCCESS';
  2. const LOGIN_Failed = 'LOGIN_Failed';
  3.  
  4. export function login(username,password) {
  5. if (username === 'realUser' && password === 'secretPassword') {
  6. return { type: LOGIN_SUCCESS,payload: { name: 'Joe',username: 'realUser' } };
  7. } else {
  8. return { type: LOGIN_Failed,error: 'Invalid username or password };
  9. }
  10. }

猜你在找的React相关文章