通过状态更新clickHandler事件在阵营

Question

我有一个阵营的应用程序，如：

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> 
    ); 
    } 
} 

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> 
    ); 
    } 
} 

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

对于Main组件，onClick函数应该更改state.selected_app，基于点击按钮的id。

Answer 1

你没有通过处理程序作为道具。 这里是你应该做的：

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

而且在ApplicationButtons：

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> 
); 
}