Question

我正在努力让一个非常简单的反应应用程序正常运行。

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

这是一段代码片段，我试图以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;

Answer 1

不要错过绑定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课程部分 示例代码来自该帖子

此致

Answer 2

将您的呼叫绑定到App范围：

{this.showAccount.bind（this）}

应该有用！

Inter Components与React的通信

2 个答案: