React.JS状態からの呼び出し方法

Question

私は自分のReactクラスで定義された "hello"メソッドを呼び出そうとしています。コンポーネント上の私の小道具は、学生の状態オブジェクトから値を読み取るように設定され、プロパティの1つが名前「こんにちは」である。 helloプロパティは、johnのデフォルトのpropからのinitです。 johnのデフォルトの小道具がプロパティ以外のものに設定され、オブジェクトをログアウトすると、正しく表示されます。しかし、私は私の "hello"メソッドをjohnプロパティから呼び出そうとすると、何も起こりません（ "hello"という単語をログアウトすることになっています。）私の質問は、Reactのデフォルトプロパティまたはinit状態どうすればいいですか？

サイドノート：私が使っているライブラリについて疑問に思っているのであれば、それはReact-Drag & Dropです（デカップリング用）

import React from 'react'; 
var ItemTypes = require('../box1/Constants').ItemTypes; 
var DropTarget = require('react-dnd').DropTarget; 
var Student = require('../box1/box1'); 
import update from 'react/lib/update'; 


require('./box2.css'); 
require('../../containers/Home/home.css'); 

var BoxSource = { 
    drop: function (props, monitor, component) { 
    const item = monitor.getItem(); 
    console.log(item); 
    const delta = monitor.getDifferenceFromInitialOffset(); 
    const left = Math.round(item.left + delta.x); 
    const top = Math.round(item.top + delta.y); 
    const id = item.id; 
    component.move(id, left, top); 
     } 
}; 

function collect(connect, monitor) { 
    return { 
    connectDropTarget: connect.dropTarget(), 
    didDrop: monitor.didDrop(), 
    source: monitor.getSourceClientOffset(), 
    item: monitor.getItem(), 
    drop: monitor.didDrop(), 
    result: monitor.getDropResult() 
    }; 
} 

var box2 = React.createClass({ 

    getInitialState: function() { 
    return { Students: { 
     '1': { top: 20, left: 80, hello: this.props.john } 

     } 
    ,text: 0 }; 
    }, 

    getDefaultProps: function() { 
    return { 
     john: this.hello 
    }; 
    }, 
    move: function(id,left,top){ 
    this.setState(update(this.state,{ 
      Students:{ 
       [id]:{ 
        $merge:{ 
        left:left, 
        top: top 
        } 
        } 
       } 
      }));  
    }, 

    onChange: function(e){ 
     this.setState({ text: e.target.value }); 
    }, 

    add: function (e){ 
    var StudentsNew = { }; 
    for(var i = 1; i <= this.state.text; i++){ 
     StudentsNew [i] = { left: 100, top: 100 } ; 
    } 
    var StudentsCopy = this.state.Students; 
    var studentMerge = Object.assign(StudentsCopy,StudentsNew); 
    this.setState({ Students: studentMerge }) 
    }, 

    reset: function(){ 

     this.setState({ Students:{ [1]: { top: 20, left: 80 } } }); 


    }, 

    hello: function(){ 

     console.log('hello'); 


    }, 




    render:function() { 
    const { Students } = this.state; 
    var connectDropTarget = this.props.connectDropTarget; 
    return connectDropTarget(
     <div id = "box"> 

      {Object.keys(Students).map(key =>{ 
       const { left, top, title, hello } = Students[key]; 
       return(
        <div> 
          <Student key = {key} id = {key} left = {left} 
          top = {top} hello = {hello} > </Student> 

          </div> 

         );})} 

      <button onClick = {this.add}> Enter Amount of Students </button> 
      <button onClick = {this.reset}> Reset </button> 
      <input onChange = {this.onChange} type="number" name="quantity" min="1" max="200"/><br/> 



     </div> 
    ); 
    } 
}); 

module.exports = DropTarget(ItemTypes.STUDENT, BoxSource, collect)(box2); 

Answer 1

getDefaultProps befo呼び出される：

コード）を反応させ使用してインターフェイスをドラッグ・アンド・ドロップクラスが開始されます。だからこそ、undefinedとなる。たくさんのあなたの答えのための

var example = React.createClass({ 
getInitialState: function(){ 
    return { 
     methodName : this.hello 
    } 
}, 
hello: function(){ 
    console.log('hello'); 
}, 

render: function(){ 
    console.log(this.state.methodName); // call or pass it to a child 
    ... 
    } 
});