在 React 中绑定事件有以下几种方式：

①：在构造函数中使用 bind 绑定 this：

class App extends React.Component {
	constructor (props) {
		super(props)
		this.state = {
			btnTxt: "保存"
		}
		this.changeBtnTxt = this.changeBtnTxt.bind(this)
	}
	changeBtnTxt () {
		this.setState({
			btnTxt: this.state.btnTxt === "保存" ? "编辑" : "保存"
		})
	}
	render () {
		return (
			<div>
				<button onClick = { this.changeBtnTxt }>
					{ this.state.btnTxt }
				</button>
			</div>
		)
	}
}

②：在调用时使用 bind 绑定 this：

class App extends React.Component {
	constructor (props) {
		super(props)
		this.state = {
			btnTxt: "保存"
		}
	}
	changeBtnTxt () {
		this.setState({
			btnTxt: this.state.btnTxt === "保存" ? "编辑" : "保存"
		})
	}
	render () {
		return (
			<div>
				<button onClick = { this.changeBtnTxt.bind(this) }>
					{ this.state.btnTxt }
				</button>
			</div>
		)
	}
}

③：在调用时使用箭头函数绑定 this：

class App extends React.Component {
	constructor (props) {
		super(props)
		this.state = {
			btnTxt: "保存"
		}
	}
	changeBtnTxt () {
		this.setState({
			btnTxt: this.state.btnTxt === "保存" ? "编辑" : "保存"
		})
	}
	render () {
		return (
			<div>
				<button onClick = { () => this.changeBtnTxt() }>
					{ this.state.btnTxt }
				</button>
			</div>
		)
	}
}

④：使用属性初始化器语法绑定 this：

class App extends React.Component {
	constructor (props) {
		super(props)
		this.state = {
			btnTxt: "保存"
		}
	}
	changeBtnTxt = () => {
		this.setState({
			btnTxt: this.state.btnTxt === "保存" ? "编辑" : "保存"
		})
	}
	render () {
		return (
			<div>
				<button onClick = { this.changeBtnTxt }>
					{ this.state.btnTxt }
				</button>
			</div>
		)
	}
}

比较：

方式 2 和方式 3 都是在调用的时候再绑定 this。

• 优点：写法比较简单，当组件中没有 state 的时候就不需要添加类构造函数来绑定 this
• 缺点：每一次调用的时候都会生成一个新的方法实例，因此对性能有影响，并且当这个函数作为属性值传入低阶组件的时候，这些组件可能会进行额外的重新渲染，因为每一次都是新的方法实例作为的新的属性传递。

方式 1 在类构造函数中绑定 this，调用的时候不需要再绑定

• 优点：只会生成一个方法实例，并且绑定一次之后如果多次用到这个方法也不需要再绑定。
• 缺点：即使不用到 state，也需要添加类构造函数来绑定 this，代码量多一点。。。

方式 4：利用属性初始化语法，将方法初始化为箭头函数，因此在创建函数的时候就绑定了 this。

• 优点：创建方法就绑定 this，不需要在类构造函数中绑定，调用的时候不需要再作绑定。结合了方式 1、方式 2、方式 3 的优点
• 缺点：需要用 babel 转译

简写方式（推荐，虽然需要 babel 进行转译，但是在使用 Create React App 开发时，默认是启用这种语法的）：

class App extends React.Component {
	// 表示给App组件实例添加一个state属性，值为一个对象
	state = {
		btnTxt: "保存"
	}
	changeBtnTxt = () => {
		this.setState({
			btnTxt: this.state.btnTxt === "保存" ? "编辑" : "保存"
		})
	}
	render () {
		return (
			<div>
				<button onClick = { this.changeBtnTxt }>
					{ this.state.btnTxt }
				</button>
			</div>
		)
	}
}