道具处理程序无法始终如一地工作

prop handlers not working consistently?

本文关键字：始终如一 工作 处理 程序      更新时间：2023-09-26

我正在开发一个 RN 应用程序，我遇到了一个问题，由于子组件中发生的事件，我尝试更改组件的状态，并且我得到的结果不一致。

var app = React.createClass({
  render: function() {
    return (
      <MainLogin onLogin={this.onLogin} />
    );
  },
  onLogin: function() {
    this.setState({isLoggedIn: true});
  }
});
class MainLogin extends Component {
  render() {
    return(
      <Login changeSomething={this.changeSomething} onLogin={this.props.onLogin}/>
    );
  }
  changeSomething() {
    this.setState({something: true});
  }
}
class Login extends Component {
  constructor(props) {
    super(props);
  }
  loginPressed() {
    this.props.onLogin(); //This works
  }
  changeSomething() {
    this.props.changeSomething(); //This doesn't work
  }
  render() {
    return (
      <View style={{flex: 1}}>
        <Button onPress={this.changeSomething.bind(this)}>Change Something</Button>
        <Button onPress={this.loginPressed.bind(this)}>Login</Button>
      </View>
    );
  }
}

onLogin 函数运行完美，能够设置 Grandparent 组件的状态，而 changeSomething 函数失败（this.setState 不是函数）。

有什么建议吗？

您应该在 ES6 类中绑定组件方法。React.createClass自动执行此操作，但您的第二个和第三个组件使用 ES6 类进行子类化。这是官方网站上对此的解释。

相关文章：