Вызов метода из состояния React.JS

Question

Я пытаюсь вызвать мой "привет" метод, определенный в моем классе React. Моя опора для компонента настроена на чтение значений из объекта состояния "Студенты", одним из свойств которого является "привет". Свойство hello является init из свойства john по умолчанию. Всякий раз, когда для свойства john по умолчанию установлено что-либо кроме свойства, и я отключаю объект, он отображается правильно. Но когда я пытаюсь вызвать мой метод "hello" из свойства john, ничего не происходит (предполагается выход из системы слова "hello". Мой вопрос: разрешено ли вам вызывать метод из свойства React по умолчанию или состояния init методы? Если да, правильно ли я реализую шаблон, если нет, как я могу это исправить?

Примечание: если вам интересно, какую библиотеку я использую, это React-Drag & Drop (для разделения интерфейсов перетаскивания с помощью React)

Код:

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 вызывается до инициации класса. Вот почему это дает undefined, Может быть, вы должны отослать hello метод как состояние в getInitialState

РЕДАКТИРОВАТЬ Пример установки метода как состояния:

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