javascript - 使用React进行组件间通信

我正在尝试启动并运行一个非常简单的react应用程序。

用例很简单：
一个自动完成组件，该组件将获取一组帐户名称，并在更改值后（用户已选择值）-触发事件，将显示该帐户。

这是一个代码段，我正在尝试以一种方式使showAccount方法可以访问App的状态。

如何从showAccount()访问应用程序的状态？

import React, { Component } from 'react';
import injectTapEventPlugin from 'react-tap-event-plugin';

import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AutoComplete from 'material-ui/AutoComplete';


// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();

import './App.css';


class App extends Component {
  constructor () {
    super();
    this.state = {accounts: []}
  }

  componentDidMount() {
    this.setState({ accounts: [
      {account_name: "foo", account_id: 1},
      {account_name: "bar", account_id: 2}
    ]})
  }

  showAccount (value) {
    // HERE IS THE PROBLEM!
    // `this` points to AutoComplete rather than to App
    console.log(this.state.accounts)
  }

  render() {
    return (
      <MuiThemeProvider>
        <div className="App">
        <center>
        <AutoComplete
          floatingLabelText="account name"
          filter={AutoComplete.caseInsensitiveFilter}
          dataSource={this.state.accounts.map((account) => account.account_name)}
          onUpdateInput={this.showAccount}
        /></center>
        </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

最佳答案

您不会错过绑定showAccount方法吗？

检查此代码，这里有一个如何绑定它的示例，您需要对showAccount方法执行相同的操作。

class InputExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = { text: '' };
    this.change = this.change.bind(this);
  }

  change(ev) {
    this.setState({ text: ev.target.value });
  }

  render() {
    let { text } = this.state;
    return (<input type="text" value={text} onChange={this.change} />);
  }
}

在ECMAScript 2015类中，您需要手动绑定方法。

我没有时间去扩展更多内容，因为我正在工作，但请查看本文

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/
 检查ECMAScript 2015类部分
示例代码来自该帖子

问候