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

Я пытаюсь вызвать свой метод «hello», определенный в моем классе React. My prop on the component is set to read the values from the Students state object, with one of the properties being name «hello». Hello свойство init от John default prop. Всякий раз, когда John default prop устанавливается на что-нибудь, кроме свойства, и я выхожу из объекта, он отображается правильно. Но когда я пытаюсь вызвать свой метод » hello «из свойства john, ничего не происходит (он должен выйти из системы со словом»hello». Мой вопрос заключается в том, можно ли вызвать метод из свойства React по умолчанию или Init state методы ? Если да, то правильно ли я реализую шаблон, если нет, то как это исправить ?

Примечание: Если вам интересно о библиотеке, которую я использую, это 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);

1 ответ

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