React-dnd: Wie kann ich Dispatch in einer connectDropTarget-Komponente verwenden?

Erstellt am 26. Feb. 2016 · 4Kommentare · Quelle: react-dnd/react-dnd

wenn ich reag-DND benutze, habe ich ein Problem gefunden.

Frage, ich möchte Dispatch in einer connectDropTarget-Komponente verwenden.

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

als ich so schrieb.

Uncaught TypeError: component.localHandleMove is not a function

Ich möchte, wie kann ich den Versand in einer Komponente verwenden?

Danke

Quelle

dreamcog

Hilfreichster Kommentar

Nein, component.store ist eine Instanzvariable, die eine private API ist und nirgendwo dokumentiert ist. Es könnte in jeder Version von React Redux verschwunden sein, also verlassen Sie sich bitte nicht darauf.

Was Sie wollen, ist, connect() _after_ DropTarget() damit Requisiten, die von connect() (einschließlich dispatch ) injiziert wurden, Ihnen im Drop-Ziel zur Verfügung stehen:

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 am 28. Feb. 2016

👍6 ❤2

Alle 4 Kommentare

Schließlich fand ich heraus, dass es so gehen könnte:

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 am 26. Feb. 2016

Was Sie wollen, ist, connect() _after_ DropTarget() damit Requisiten, die von connect() (einschließlich dispatch ) injiziert wurden, Ihnen im Drop-Ziel zur Verfügung stehen:

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 am 28. Feb. 2016

👍6 ❤2

Was Sie wollen, ist connect() nach DropTarget() zu setzen...

Sollte es nicht früher kommen?

shem86 am 3. März 2016

👍5

Nein, component.store ist eine Instanzvariable, die eine private API ist und nirgendwo dokumentiert ist. Es könnte in jeder Version von React Redux verschwunden sein, also verlassen Sie sich bitte nicht darauf.
Was Sie wollen, ist, connect() _after_ DropTarget() damit Requisiten, die von connect() (einschließlich dispatch ) injiziert wurden, Ihnen im Drop-Ziel zur Verfügung stehen:
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);

Was ist hier flow ?

gl2748 am 19. Apr. 2019

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen

React-dnd: Wie kann ich Dispatch in einer connectDropTarget-Komponente verwenden?

Hilfreichster Kommentar

Alle 4 Kommentare

Verwandte Themen