Javascript 在React中传递状态更新程序clickHandler

我有一个React应用程序，如：

Main.js-

import React, { Component } from 'react';
import _ from 'underscore';

import ApplicationsButtons from '../components/ApplicationsButtons';


let applications_url = 'http://127.0.0.1:8889/api/applications'


export default class Main extends Component {

  constructor(props) {
      super(props);
      this.state = {applications: [], selected_app: 1};
      this.updateSelectedApp = this.updateSelectedApp.bind(this);
  }

  componentDidMount() {
    let self = this;
    $.ajax({
        url: applications_url,
        method: 'GET',
        success: function(data) {
            console.log(data);
            let objects = data.objects;
            let apps = objects.map(function(object) {
                return {name: object.name, id: object.id};
            });
            console.log(apps);
            self.setState({applications: apps});
        }
    });
  }

  updateSelectedApp(id) {
      this.setState({selected_app: id});
  }

  render() {

    return (
      <div>
        {this.state.selected_app}
        <ApplicationsButtons apps={this.state.applications} />
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“下划线”导入；
从“../components/ApplicationButtons”导入应用程序按钮；
让应用程序http://127.0.0.1:8889/api/applications'
导出默认类主扩展组件{
建造师（道具）{
超级（道具）；
this.state={applications:[]，选中的_app:1}；
this.updateSelectedApp=this.updateSelectedApp.bind（this）；
}
componentDidMount（）{
让自我=这个；
$.ajax({
url:applications\u url，
方法：“GET”，
成功：功能（数据）{
控制台日志（数据）；
让objects=data.objects；
让apps=objects.map（函数（对象）{
返回{name:object.name，id:object.id}；
});
控制台日志（应用程序）；
self.setState（{applications:apps}）；
}
});
}
updateSelectedApp（id）{
this.setState（{selected_app:id}）；
}
render（）{
返回(
{this.state.selected_app}
);
}
}

ApplicationsButtons.js-

import React, { Component } from 'react';


export default class ApplicationsButtons extends Component {

  render() {
    var buttons = null;
    let apps = this.props.apps;
    let clickHandler = this.props.clickHandler;
    if (apps.length > 0) {
        buttons = apps.map(function(app) {
            return (<button key={app.id}>{app.name} - {app.id}</button>);
            // return (<button onClick={clickHandler.apply(null, app.id)} key={app.id}>{app.name} - {app.id}</button>);
        });
    }

    return (
      <div>
        {buttons}
      </div>
    );
  }
}

import React，{Component}来自'React'；
导出默认类应用程序按钮扩展组件{
render（）{
var=null；
让apps=this.props.apps；
让clickHandler=this.props.clickHandler；
如果（apps.length>0）{
按钮=apps.map（功能（应用程序）{
返回（{app.name}-{app.id}）；
//返回（{app.name}-{app.id}）；
});
}
返回(
{按钮}
);
}
}

我想通过点击按钮来更改当前选择的应用程序。不知怎的，我在React中得到了我的第一个无限循环（“setState刚刚运行了20000次”）。显然，当我试图传递要在单击时调用的事件处理程序时，我告诉它继续调用它

---

onClick函数应更改

状态。根据所单击按钮的
id
，为
主组件选择应用程序。
您没有将处理程序作为道具传递。
以下是您应该做的：

render() {
  return (
    <div>
      {this.state.selected_app}
      <ApplicationsButtons 
         apps={this.state.applications} 
         handleClick={this.updateSelectedApp}
      />
    </div>
  );
}

render（）{
返回(
{this.state.selected_app}
);
}

和应用程序按钮：

render() {
  var buttons = null;
  let apps = this.props.apps;
  let clickHandler = this.props.handleClick;
  if (apps.length > 0) {
    buttons = apps.map(app => 
      <button key={app.id} onClick={() => clickHandler(app.id)}>{app.name} - {app.id}</button>);
    );
  }

  return (
    <div>
      {buttons}
    </div>
  );
}

render（）{
var=null；
让apps=this.props.apps；
让clickHandler=this.props.handleClick；
如果（apps.length>0）{
按钮=应用程序.map（应用程序=>
clickHandler（app.id）}>{app.name}-{app.id}）；
);
}
返回(
{按钮}
);
}
您没有将处理程序作为道具传递。
以下是您应该做的：

render() {
  return (
    <div>
      {this.state.selected_app}
      <ApplicationsButtons 
         apps={this.state.applications} 
         handleClick={this.updateSelectedApp}
      />
    </div>
  );
}

render（）{
返回(
{this.state.selected_app}
);
}

和应用程序按钮：

render() {
  var buttons = null;
  let apps = this.props.apps;
  let clickHandler = this.props.handleClick;
  if (apps.length > 0) {
    buttons = apps.map(app => 
      <button key={app.id} onClick={() => clickHandler(app.id)}>{app.name} - {app.id}</button>);
    );
  }

  return (
    <div>
      {buttons}
    </div>
  );
}

render（）{
var=null；
让apps=this.props.apps；
让clickHandler=this.props.handleClick；
如果（apps.length>0）{
按钮=应用程序.map（应用程序=>
clickHandler（app.id）}>{app.name}-{app.id}）；
);
}
返回(
{按钮}
);
}
可能不相关，但此行有副作用：
this.setState（{selected_app:id}）。应该是
this.setState（{…this.state，selected_app:id}）所以
应用程序
数组没有被删除。我想它只是忽略了你现在状态的其他部分，我使用的是最新的reactv15@codyc4321你说得对，
setState
在引擎盖下使用，因此你的
setState
行很好。在回答你的问题时，尝试将
apply
替换为
bind
。可能不相关，但此行有副作用：
this.setState（{selected_app:id}）。应该是
this.setState（{…this.state，selected_app:id}）所以
应用程序
数组没有被删除。我想它只是忽略了你现在状态的其他部分，我使用的是最新的reactv15@codyc4321你说得对，
setState
在引擎盖下使用，因此你的
setState
行很好。针对你的问题，尝试用
bind
替换
apply
。我是，这只是我的示例代码。但是如果这样做有效，我忘了使用新的es6方式为您绑定它。您也可以执行
onClick={clickHandler.bind（this，app.id）}
。我是，这只是我的示例代码。但是如果这样做有效，我忘了使用新的es6方式为您绑定它。您还可以执行
onClick={clickHandler.bind（this，app.id）}
。