React-dnd: كيف يمكنني استخدام الإرسال في مكون connectDropTarget؟

تم إنشاؤها على ٢٦ فبراير ٢٠١٦ · 4تعليقات · مصدر: react-dnd/react-dnd

عندما أستخدم رد فعل DND ، وجدت مشكلة.

سؤال ، أريد استخدام الإرسال في مكون connectDropTarget.

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          component.localHandleMove(todo.todo_id);
      }
      return {};
  }
};


function collect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver()
  };
}
export default class TodoList extends Component {

    constructor(props) {
        super(props);
        this.localHandleMove = this.localHandleMove.bind(this);
    }

    localHandleMove(todo_id)  {
        this.props.dispatch(actions.completeTodo(todo_id,this.props.board_id))
    }

    render() {
        const { connectDropTarget } = this.props;
        //                  
        return connectDropTarget(
            <ul className="todo-list">
            {this.props.todos.map(function(todo){
               return <Todo key={todo.todo_id} todo={todo} />
            })}
            </ul>
        );
    } 
}


export default flow(
  connect(),
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect)
)(TodoList);

عندما كتبت هكذا.

Uncaught TypeError: component.localHandleMove is not a function

أريد كيف يمكنني استخدام الإرسال في مكون؟

شكرا

مصدر

dreamcog

التعليق الأكثر فائدة

لا ، component.store هو متغير مثيل يمثل واجهة برمجة تطبيقات خاصة ولا يتم توثيقه في أي مكان. قد يكون قد اختفى في أي إصدار من React Redux ، لذا من فضلك لا تعتمد عليه.

ما تريده هو وضع connect() _after_ DropTarget() بحيث تكون العناصر التي تم حقنها بواسطة connect() (بما في ذلك dispatch ) متاحة لك في هدف الإسقاط:

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon في ٢٨ فبراير ٢٠١٦

👍6 ❤2

ال 4 كومينتر

أخيرًا ، وجدت أنه من الممكن أن يفعل مثل هذا:

const dropTodoTarget = {
      drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
    component.store.dispatch(actions.moveTodoBoard(todo.todo_id,todo.board_id,props.board_id));
      }
      return {};
  }
};

dreamcog في ٢٦ فبراير ٢٠١٦

const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

gaearon في ٢٨ فبراير ٢٠١٦

👍6 ❤2

ما تريده هو وضع connect () بعد DropTarget () ...

ألا يفترض أن تأتي من قبل؟

shem86 في ٣ مارس ٢٠١٦

👍5

لا ، component.store هو متغير مثيل يمثل واجهة برمجة تطبيقات خاصة ولا يتم توثيقه في أي مكان. قد يكون قد اختفى في أي إصدار من React Redux ، لذا من فضلك لا تعتمد عليه.
ما تريده هو وضع connect() _after_ DropTarget() بحيث تكون العناصر التي تم حقنها بواسطة connect() (بما في ذلك dispatch ) متاحة لك في هدف الإسقاط:
const dropTodoTarget = {
  drop(props,monitor,component) {
      var todo = monitor.getItem();
      if (todo.board_id != props.board_id) {
          props.dispatch(actions.completeTodo(todo.board_id,this.props.board_id))
      }
      return {};
  }
};

// ...

export default flow(
  DropTarget(ItemTypes.TODO, dropTodoTarget, collect),
  connect()
)(TodoList);

ما هو flow هنا؟