能否从常量中调用类中的函数？React技术问题咨询

嘿，我懂你现在卡在哪了——你想在独立的_signIn函数里调用React组件Login的onSignIn方法，但不管是直接写onSignIn()还是Login.onSignIn()都没效果，对吧？这其实是React组件方法的作用域问题，咱们一步步拆解解决：

问题根源 #

首先得明确两个关键点：

• onSignIn是Login组件的实例方法，不是静态方法——它只能在Login组件的实例上调用，直接通过Login.onSignIn()调用肯定不行，因为这个方法并没有挂在组件类本身。
• _signIn是一个独立的函数，它默认没有访问Login组件实例的权限，所以直接写onSignIn()根本找不到这个方法的上下文。

解决方案 #

根据你的使用场景，有几种可行的处理方式：

1. 把_signIn放到组件内部（最直接）

如果_signIn只在Login组件里用到，那把它改成组件的方法，就能直接通过this.onSignIn()调用了：

const Login = createReactClass({
  getInitialState: function() {
    return { loading: false }
  },
  // 把_signIn改成组件内部方法
  _signIn: function(values) {
    let email = values.email;
    let password = values.password;
    console.log(`${email} ${password}`);
    
    // 直接调用组件的onSignIn方法
    this.onSignIn();
    
    return {email, password};
  },
  onSignIn: function() {
    var {dispatch} = this.props;
    this.setState({ loading: true });
    // 你的登录逻辑...
  },
  render: function() {
    // 示例：在按钮点击时调用_signIn
    return (
      <button onClick={() => this._signIn({email: 'test@example.com', password: '123'})}>
        登录
      </button>
    )
  }
});

2. 将onSignIn作为参数传给独立的_signIn

如果_signIn必须是独立于组件的函数，那可以把组件的onSignIn方法作为参数传递进去，注意要绑定好上下文：

// 独立的_signIn函数，新增onSignIn回调参数
const _signIn = (values, onSignIn) => {
  let email = values.email;
  let password = values.password;
  console.log(`${email} ${password}`);
  
  // 调用传入的onSignIn方法
  onSignIn();
  
  return {email, password};
}

const Login = createReactClass({
  getInitialState: function() {
    return { loading: false }
  },
  onSignIn: function() {
    var {dispatch} = this.props;
    this.setState({ loading: true });
    // 你的登录逻辑...
  },
  render: function() {
    return (
      <button onClick={() => {
        // 把绑定好上下文的onSignIn传给_signIn
        _signIn({email: 'test@example.com', password: '123'}, this.onSignIn.bind(this))
      }}>
        登录
      </button>
    )
  }
});

这里用bind(this)是为了保证onSignIn里的this指向组件实例，不然会出现this.setState找不到的错误。

3. 结合状态管理拆分逻辑（适合用Redux的场景）

看到你的onSignIn里用到了dispatch，推测你可能在用Redux。这种情况下可以把数据处理和状态更新拆分：_signIn负责处理输入数据并生成action，onSignIn负责触发状态更新和dispatch：

// 独立的_signIn，返回action对象
const _signIn = (values) => {
  let email = values.email;
  let password = values.password;
  console.log(`${email} ${password}`);
  
  // 返回登录请求的action
  return {
    type: 'LOGIN_REQUEST',
    payload: {email, password}
  };
}

const Login = createReactClass({
  getInitialState: function() {
    return { loading: false }
  },
  onSignIn: function(values) {
    var {dispatch} = this.props;
    this.setState({ loading: true });
    
    // 调用_signIn获取action并dispatch
    dispatch(_signIn(values));
    
    // 后续的状态处理逻辑...
  },
  render: function() {
    return (
      <button onClick={() => this.onSignIn({email: 'test@example.com', password: '123'})}>
        登录
      </button>
    )
  }
});

总结 #

核心就是要让_signIn能访问到Login组件的实例或者onSignIn方法的正确上下文，根据你的项目结构选上面的任意一种方式都能解决问题～

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