Javascript 组件间与React的通信

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

用例是直截了当的： 一个自动完成组件，用于获取帐户名数组，并在值更改（用户已选择值）时触发事件，该事件将显示帐户

下面是一个代码片段，我试图以showAccount方法可以访问应用程序状态的方式来获取该代码片段

如何从

showcount（）

访问应用程序的状态

import React，{Component}来自'React'；
从“react-tap事件插件”导入injectTapEventPlugin；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
从“物料界面/自动完成”导入自动完成；
//需要打开水龙头
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin（）；
导入“/App.css”；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.state={accounts:[]}
}
componentDidMount（）{
此.setState（{帐户：[
{帐户名：“foo”，帐户id:1}，
{帐户名称：“bar”，帐户id:2}
]})
}
showcount（值）{
//问题就在这里！
//`this`指向自动完成，而不是应用程序
console.log（this.state.accounts）
}
render（）{
报税表（
帐户。帐户（名称）}
onUpdate输入={this.showcount}
/>
);
}
}
导出默认应用程序；

您是否错过了绑定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} />);
  }
}

类InputExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:'}；
this.change=this.change.bind（this）；
}
变化（ev）{
this.setState（{text:ev.target.value}）；
}
render（）{
设{text}=this.state；
返回（）；
}
}

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

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

查看ECMAScript 2015课程部分 示例代码来自该帖子

---

关于

您是否错过了绑定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} />);
  }
}

类InputExample扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={text:'}；
this.change=this.change.bind（this）；
}
变化（ev）{
this.setState（{text:ev.target.value}）；
}
render（）{
设{text}=this.state；
返回（）；
}
}

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

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

查看ECMAScript 2015课程部分 示例代码来自该帖子

---

关于

将您的呼叫绑定到应用程序范围：

{this.showcount.bind（this）}

---

应该有用

将您的呼叫绑定到应用程序范围：

{this.showcount.bind（this）}

---

应该有用

{this.showcount.bind（this）}@AMacdonald谢谢！！你能把它设为答案，这样我就可以投票了吗？耶-刚才做的{this.showcount.bind（this）}@AMacdonald谢谢！！你能把它设为答案，这样我就可以投票了吗？是的，就是这样that@TzuryBar Yochay这是做事情的正确方法-您应该在构造函数中绑定，而不是在render方法中绑定，否则每次打开视图时绑定都会影响性能rendered@TzuryBar Yochay这是做事的正确方式-你应该在构造函数，而不是在render方法中，否则每次呈现视图时绑定都会影响性能