パス状態アップデータは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回実行しました」）で最初の無限ループを取得しました。どうやら、クリックでイベントハンドラを呼び出そうとしたとき、私はそれを呼び出すようにと言った。

クリックされたボタンのidに基づいて、MainコンポーネントのonClick関数をstate.selected_appに変更する必要があります。

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