由于某些原因，这在反应事件处理程序中的值被丢失。阅读文档我认为在这里做了一些反应，以确保这被设置为正确的价值
以下不符合我的预期
- import React from 'react';
- export default class Observer extends React.Component {
- handleClick() {
- console.log(this); //logs undefined
- }
- render() {
- return (
- <button onClick={this.handleClick}>Click</button>
- );
- }
- }
但是这样做：
- import React from 'react';
- export default class Observer extends React.Component {
- handleClick() {
- console.log(this); //logs Observer class instance
- }
- render() {
- return (
- <button onClick={this.handleClick.bind(this)}>Click</button>
- );
- }
- }
React和ES6对我来说是新的，但这似乎不是正确的行为？
这是JavaScript和React的正确行为，如果您使用新的类语法。
autobinding feature does not apply to ES6 classes在v0.13.0。
所以你需要使用：
- <button onClick={this.handleClick.bind(this)}>Click</button>
或其他技巧之一：
- export default class Observer extends React.Component {
- constructor() {
- super();
- this.handleClick = this.handleClick.bind(this);
- }
- handleClick() {
- /* ... */
- }
- render() {
- return <button onClick={this.handleClick}>Click</button>
- }
- }
