私は、ルータが反応し、私のコンポーネントのために別のURL

に私をリダイレクトするために参照しています知っている、私は私は、ルータが反応し、私のコンポーネントのために別のURL

ManageCoursePage.contextTypes = { 
    router: PropTypes.object 
};

がどのように私のクラスのメソッドは、私が自動的にリダイレクトするようにルータを反応させる参照していますことを知っていないコンテキストを設定しました私は別のURLに？

import React, { PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as courseActions from '../../actions/courseActions'; 
import CourseForm from './courseForm'; 


class ManageCoursePage extends React.Component { 
    constructor(props, context) { 
     super(props, context); 

     // set up local state 
     this.state = { 
      errors: {}, 
      course: Object.assign({}, this.props.course) 
     }; 

     this.updateCourseState = this.updateCourseState.bind(this); 
     this.saveCourse = this.saveCourse.bind(this); 

    } 

    updateCourseState(event) { 
     const field = event.target.name; 
     let course = this.state.course; 
     course[field] = event.target.value; 
     return this.setState({ 
      course: course 
     }); 
    } 

    saveCourse(event) { 
     event.preventDefault(); 
     this.props.actions.saveCourse(this.state.course); 
     this.context.router.push('/courses'); 
    } 

    render() { 
     return (
      <CourseForm 
       allAuthors={ this.props.authors } 
       onChange={ this.updateCourseState } 
       onSave={ this.saveCourse } 
       course={ this.state.course } 
       errors={ this.state.errors } 

      /> 
     ); 
    } 
} 

ManageCoursePage.propTypes = { 
    // myProp: PropTypes.string.isRequired 
    course: PropTypes.object.isRequired, 
    authors: PropTypes.array.isRequired, 
    actions: PropTypes.object.isRequired 
}; 

// Pull in the React Router context so router is available on this.context.router 
// basically a global variable to make it easy for other components to get data easily 
ManageCoursePage.contextTypes = { 
    router: PropTypes.object 
}; 

function mapStateToProps(state, ownProps) { 
    // empty course 
    let course = { 
     id: "", 
     watchHref: "", 
     title: "", 
     authorId: "", 
     length: "", 
     category: "" 
    }; 

    const authorsFormattedForDropDown = state.authors.map(author => { 
     return { 
      value: author.id, 
      text: author.firstName + " " + author.lastName 
     }; 
    }); 

    return { 
     course: course, 
     authors: authorsFormattedForDropDown 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(courseActions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage);

出典

2016-08-15 Liondancer