React-dnd: मैं ConnectDropTarget घटक में प्रेषण का उपयोग कैसे कर सकता हूं?

को निर्मित 26 फ़र॰ 2016 · 4टिप्पणियाँ · स्रोत: 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 एक आवृत्ति चर है जो एक निजी एपीआई है और कहीं भी प्रलेखित नहीं है। यह रिएक्ट रेडक्स के किसी भी संस्करण में चला गया हो सकता है, इसलिए कृपया इस पर भरोसा न करें।

आप जो चाहते हैं वह connect() _after_ DropTarget() connect() डालना है ताकि ड्रॉप लक्ष्य में आपके लिए 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 28 फ़र॰ 2016

👍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 26 फ़र॰ 2016

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 28 फ़र॰ 2016

👍6 ❤2

आप जो चाहते हैं वह DropTarget() के बाद कनेक्ट() डालना है ...

क्या यह पहले नहीं आना चाहिए?

shem86 3 मार्च 2016

👍5

नहीं, component.store एक आवृत्ति चर है जो एक निजी एपीआई है और कहीं भी प्रलेखित नहीं है। यह रिएक्ट रेडक्स के किसी भी संस्करण में चला गया हो सकता है, इसलिए कृपया इस पर भरोसा न करें।
आप जो चाहते हैं वह connect() _after_ DropTarget() connect() डालना है ताकि ड्रॉप लक्ष्य में आपके लिए 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 क्या है?

gl2748 19 अप्रैल 2019

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React-dnd: मैं ConnectDropTarget घटक में प्रेषण का उपयोग कैसे कर सकता हूं?

सबसे उपयोगी टिप्पणी

सभी 4 टिप्पणियाँ

संबंधित मुद्दों