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}`); 
} 

在這個wa y，你不需要在構造函數中綁定這個