React组件中client成员渲染后变为undefined，点击事件调用失败

你遇到的是React类组件里非常常见的this绑定丢失问题——当事件处理函数被传递给子组件的onClick属性时，函数执行时的上下文this会脱离组件实例，导致你访问this.client时得到undefined。下面给你几种实用的解决方案：

方案1：在构造函数中手动绑定this #

这是最经典的处理方式，在组件初始化时就把事件处理函数的this绑定到当前组件实例：

import * as React from 'react';
import Client, { Channel } from '../modules/Client';
import { Container, Grid, GridItem, Placeholder } from '../modules/UI';
import ChannelsList from '../components/ChannelsList';
import Loading from '../components/Loading';

interface Props {}
interface State {
  channels: Channel[];
  loading: boolean;
}

class YourComponent extends React.Component<Props, State> {
  client: Client;

  constructor(props: Props) {
    super(props);
    this.state = {
      channels: [],
      loading: true
    };
    // 初始化Client实例
    this.client = new Client();
    // 关键：绑定事件处理函数的this到组件实例
    this.handleChannelClick = this.handleChannelClick.bind(this);
  }

  handleChannelClick() {
    // 现在this会正确指向组件实例，this.client不再是undefined
    const channel = this.client.getChannel();
    // 后续业务逻辑处理
  }

  render() {
    return (
      <Container>
        <Grid>
          <GridItem>
            <ChannelsList onClick={this.handleChannelClick} />
          </GridItem>
        </Grid>
      </Container>
    );
  }
}

export default YourComponent;

方案2：用箭头函数定义事件处理函数 #

箭头函数会自动捕获当前上下文的this，直接用它定义处理函数可以省去手动绑定的步骤，代码更简洁：

class YourComponent extends React.Component<Props, State> {
  client: Client;

  constructor(props: Props) {
    super(props);
    this.state = {
      channels: [],
      loading: true
    };
    this.client = new Client();
  }

  // 箭头函数自动绑定this到组件实例
  handleChannelClick = () => {
    const channel = this.client.getChannel();
    // 后续业务逻辑处理
  };

  render() {
    return (
      <Container>
        <Grid>
          <GridItem>
            <ChannelsList onClick={this.handleChannelClick} />
          </GridItem>
        </Grid>
      </Container>
    );
  }
}

方案3：在render中用箭头函数包裹（不推荐高频渲染场景） #

如果是临时的简单场景，也可以在render的onClick里直接用箭头函数包裹处理函数，但这种方式每次组件渲染都会创建新的函数实例，可能导致子组件不必要的重渲染，性能敏感的场景不建议使用：

render() {
  return (
    <Container>
      <Grid>
        <GridItem>
          <ChannelsList onClick={() => this.handleChannelClick()} />
        </GridItem>
      </Grid>
    </Container>
  );
}

核心逻辑就是保证事件处理函数执行时，this指向你的React组件实例，这样就能正常访问到初始化好的this.client了。前两种方案是日常开发中最常用的，推荐优先选择。

内容的提问来源于stack exchange，提问作者Jay