Question

React菜鸟在这里！

我在这里有一个相当简单的组件，作为教育项目的一小部分：

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

在你的构造函数中你绑定不正确，有一个拼写错误：

$msg

应该是：

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

Answer 2

您可以使用箭头功能，如下所示：

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

通过这种方式，您无需在构造函数

中绑定它

ReactJS onClick触发器不会自动触发

2 个答案: