0

下面是我在数据库中编辑“课程”对象的示例。在台式机上工作得很好,但在我的 iPhone 上却不行。我无法在 Android 或其他设备上进行检查。

不确定我可以添加哪些更多细节,但我需要添加,因为 StackOverflow 不会让我发布,直到我使用这个填充物。请忽略整个段落......

imports...

class EditCoursePage extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      name: this.props.name,
      submitted: false,
      _creator: {},
    };
    this.updateName = this.updateName.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
    this.handleBack = this.handleBack.bind(this);
  }

  handleBack(event) {
    window.location.href = `/courses/${this.props.match.params.cuid}`;
  }

  updateName(event) {
    var input = event.target.value;
    this.setState({
      name: input,
    });
  }

  componentWillMount() {
    this.props.dispatch(actions.getCourse(this.props.match.params.cuid));
  }

  componentDidMount() {
    this.props.dispatch(actions.getCourse(this.props.match.params.cuid));
  }

  onSubmit(event) {
    const name = this.state.name;
    const instructor = cookies.get('instructor')._id;
    console.log(cookies.get('instructor')._id);
    this.setState({
      submitted: true,
    });
    this.props.dispatch(actions.editCourse(name,this.props.match.params.cuid));
    console.log(this.props.name);
    console.log(name, cookies.get('instructor')._id);
  }

  render() {
    if (this.state.submitted) {
      window.location.href = `https://young-mountain-65748.herokuapp.com/courses/${this.props.match.params.cuid}`;
    }
    return (
      <div className="edit-course-form">
        <div className="menu">
          <Menu>
            <a
              id="dashboard-return"
              className="menu-item"
              href={`/courses/${this.props.match.params.cuid}`}
            >
              Back to Your Course
            </a>
            <a id="dashboard-logout" className="menu-item" href="/login">
              Logout
            </a>
          </Menu>
        </div>
        <div className="mobile-header">
          <div className="mobile-name">{this.props.name}</div>
        </div>
        <div className="edit-course-nav-options">
          <div className="course-app-name">School Management App</div>
          <ul>
            <li>
              <Link to="/login" onClick={this.handleLogout}>Log out </Link>
            </li>
            <li>
              <Link to={`/courses/${this.props.match.params.cuid}`}>
                Back to Your Course
              </Link>
            </li>
          </ul>
        </div>
        <div className="container">
          <div className="edit-course-name"><h2>{this.props.name}</h2></div>
          <div className="submitForm">
            <div className="field-line">
              <label htmlFor="coursename">New Course Name:</label>
              <input
                id="coursename"
                name="coursename"
                value={this.state.name}
                onChange={this.updateName}
              />
            </div>
          </div>
        </div>
        <div className="edit-course-buttons">
          <button className="edit-course" onClick={this.onSubmit}>
            Edit Course
          </button>
          <button className="edit-course-back" onClick={this.handleBack}>
            Back
          </button>
        </div>
      </div>
    );
  }
}
const mapStateToProps = (state, props) => {
  return {
    name: state.course.course.name,
    _creator: state.course._creator,
  };
};
export default connect(mapStateToProps)(EditCoursePage);

4

0 回答 0