通過狀態更新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> 
); 
}