React-dnd: connectDropTarget 구성 요소에서 디스패치를 사용하려면 어떻게 해야 합니까?

에 만든 2016년 02월 26일 · 4코멘트 · 출처: react-dnd/react-dnd

react-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 는 비공개 API이며 어디에도 문서화되지 않은 인스턴스 변수입니다. React Redux의 모든 버전에서 사라질 수 있으므로 그것에 의존하지 마십시오.

원하는 것은 connect() ( dispatch )에 의해 주입된 소품을 드롭 대상에서 사용할 수 있도록 connect() _after_ DropTarget() connect() 넣는 것입니다.

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 에 2016년 02월 28일

👍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 에 2016년 02월 26일

원하는 것은 connect() ( dispatch )에 의해 주입된 소품을 드롭 대상에서 사용할 수 있도록 connect() _after_ DropTarget() connect() 넣는 것입니다.

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 에 2016년 02월 28일

👍6 ❤2

원하는 것은 DropTarget() 뒤에 connect()를 넣는 것입니다...

그전에 와야하는거 아닌가?

shem86 에 2016년 03월 03일

👍5

아니요, component.store 는 비공개 API이며 어디에도 문서화되지 않은 인스턴스 변수입니다. React Redux의 모든 버전에서 사라질 수 있으므로 그것에 의존하지 마십시오.
원하는 것은 connect() ( dispatch )에 의해 주입된 소품을 드롭 대상에서 사용할 수 있도록 connect() _after_ DropTarget() connect() 넣는 것입니다.
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 는 무엇입니까?

gl2748 에 2019년 04월 19일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React-dnd: connectDropTarget 구성 요소에서 디스패치를 ​​사용하려면 어떻게 해야 합니까?

가장 유용한 댓글

모든 4 댓글

관련 문제

React-dnd: connectDropTarget 구성 요소에서 디스패치를 사용하려면 어떻게 해야 합니까?