Inter Components与React的通信

我试图让一个非常简单的反应应用程序启动并运行。Inter Components与React的通信

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

这是一段代码，我试图以showAccount方法访问应用程序状态的方式获得工作。

如何从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;

来源

2016-11-23 Tzury Bar Yochay

{this.showAccount.bind（this）} –

@AMacdonald谢谢!! 你会将它设置为答案，以便我可以投票吗？ –

yay - 只是做了 –

不要错过绑定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/ 检查2015年的ECMAScript类部分 的示例代码是从该职位

问候

来源

2016-11-23 17:32:27

@Trury Bar Yochay这是做事情的核心方式 - 你应该在构造函数中绑定，而不是在渲染方法中绑定，否则你会在每次渲染视图时通过绑定来获得性能点击感谢 – Jordan

谢谢 - 这是一个很好的链接和一个很好的学习:) –

你的电话绑定到App范围：

{this.showAccount.bind（this）}

应该工作！

来源

2016-11-23 17:35:18

Inter Components与React的通信

回答

相关问题