React-dnd: Bagaimana saya bisa menggunakan pengiriman dalam komponen connectDropTarget?

Dibuat pada 26 Feb 2016 · 4Komentar · Sumber: react-dnd/react-dnd

ketika saya menggunakan react-DND , menemukan masalah.

pertanyaan, saya ingin menggunakan pengiriman dalam komponen 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);

ketika saya menulis seperti ini.

Uncaught TypeError: component.localHandleMove is not a function

Saya ingin bagaimana saya bisa menggunakan pengiriman dalam suatu komponen?

Terima kasih

Sumber

dreamcog

Komentar yang paling membantu

Tidak, component.store adalah variabel instan yang merupakan API pribadi dan tidak didokumentasikan di mana pun. Itu mungkin hilang di versi React Redux apa pun jadi tolong jangan mengandalkannya.

Yang Anda inginkan adalah meletakkan connect() _after_ DropTarget() sehingga props yang disuntikkan oleh connect() (termasuk dispatch ) tersedia untuk Anda di target drop:

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 pada 28 Feb 2016

👍6 ❤2

Semua 4 komentar

akhirnya, saya menemukan bisa melakukan seperti ini:

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 pada 26 Feb 2016

Tidak, component.store adalah variabel instan yang merupakan API pribadi dan tidak didokumentasikan di mana pun. Itu mungkin hilang di versi React Redux apa pun jadi tolong jangan mengandalkannya.

Yang Anda inginkan adalah meletakkan connect() _after_ DropTarget() sehingga props yang disuntikkan oleh connect() (termasuk dispatch ) tersedia untuk Anda di target drop:

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 pada 28 Feb 2016

👍6 ❤2

Yang Anda inginkan adalah meletakkan connect() setelah DropTarget()...

Bukankah seharusnya datang sebelumnya?

shem86 pada 3 Mar 2016

👍5

Tidak, component.store adalah variabel instan yang merupakan API pribadi dan tidak didokumentasikan di mana pun. Itu mungkin hilang di versi React Redux apa pun jadi tolong jangan mengandalkannya.
Yang Anda inginkan adalah meletakkan connect() _after_ DropTarget() sehingga props yang disuntikkan oleh connect() (termasuk dispatch ) tersedia untuk Anda di target drop:
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);

Apa flow sini?