ReactJS onClick 觸發器不會自行觸發

Question

在這里反應菜鳥！

我這里有一個相當簡單的組件，作為教育項目的一小部分：

import React, {PropTypes} from 'react';


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

    this.state = {
      course: {title: ""}
    };

    this.onTitleChange = this.onTitleChange.bind(this);
    this.onClickSave = this.onTitleChange.bind(this);
  }

  onTitleChange(event) {
    const course = this.state.course;
    course.title = event.target.value;
    this.setState({course: course});
  }

  onClickSave() {
    alert(`Saving ${this.state.course.title}`);
  }


  render() {
    return (
      <div>
        <h1>Courses</h1>
        <h2>Add Course</h2>

        <input
          type="text"
          onChange={this.onTitleChange}
          value={this.state.course.title} />

        <button type="submit" onClick={this.onClickSave}>Save</button>
      </div>
    );
  }

}

export default CoursesPage;

我現在的問題是，當我單擊保存按鈕時，警報對話框不會自行彈出。 到目前為止，我對此有兩個理論：

• onClick觸發器不起作用
• 由於某種原因，警報對話框沒有出現。

注意：我沒有忘記在組件類構造函數中綁定this 。

有任何想法嗎？

Answer 1

在您的構造函數中，您綁定不正確，有一個錯字：

this.onClickSave = this.onTitleChange.bind(this);

應該：

this.onClickSave = this.onClickSave.bind(this);

Answer 2

您可以使用箭頭函數，如下所示：

onClickSave = () => {
    alert(`Saving ${this.state.course.title}`);
}

這樣，就不需要在構造函數中綁定 this