Question

我正在尝试调用我的React类中定义的“hello”方法。我对组件的支持设置为从Students状态对象读取值，其中一个属性名为“hello”。 hello属性是来自john默认prop的init。每当john默认道具被设置为除属性之外的任何东西，并且我注销对象时，它会正确显示。但是当我尝试从john属性中调用我的“hello”方法时，没有任何反应（它应该注销单词“hello”。我的问题是，你是否允许从React的默认属性或init状态中调用一个方法方法？如果是这样，我是否正确实现了模式，如果不能解决它？

旁注：如果你想知道我正在使用的库，那就是React-Drag＆amp; 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 ... } });

从React.JS状态调用方法

1 个答案: