コンポーネント間の通信との反応

Question

私は非常に単純な反応のアプリケーションを起動して実行しようとしています。

ユースケースは簡単です： アカウント名の配列を取得し、値が変更されると（ユーザーが値を選択しました） - アカウントを表示するfireイベントです。

ここでは、showAccountメソッドがAppの状態にアクセスできるようにするためのコードスニペットを示します。

showAccount()からAppの状態にアクセスするにはどうすればよいですか？

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

バインドお電話を：

{this.showAccount.bind（this）}

は動作します。