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，你不需要在构造函数中绑定这个