React-dnd: ドラッグ可能なコンポーネント内の入力のドラッグを無効にしますか？

私はあなたが次のようなことをすることができるはずだと思います

render() {
  let element = (
    <div>
      <input
        onMouseEnter={() => this.setState({ overInput: true }) }
        onMouseLeave={() => this.setState({ overInput: false }) }
      />
    </div>
  );

  if (this.state.overInput) {
    return element;
  }

  return this.props.connectDragSource(element);
}

これはどう？

class RowDraggable extends React.Component {
    node = undefined;
    constructor(props, ctx) {
      super(props, ctx);

      this.onHoverOverInput = this.onHoverOverInput.bind(this);
      this.onHoverOutOfInput = this.onHoverOutOfInput.bind(this);

      this.state = {overInput: false};
    }
    componentWillUnmount() {
      this.detachEventListeners(this.node);
      this.node = undefined;
    }
    getInputElements(node) {
      return node
        ? Array.prototype.slice
            .call(node.getElementsByTagName('input'))
            .filter(e => !e.readOnly)
        : [];
    }
    onHoverOverInput() {
      this.setState({overInput: true});
    }
    onHoverOutOfInput() {
      this.setState({overInput: false});
    }
    detachEventListeners(node) {
      this.getInputElements(node).map(e => {
        e.removeEventListener('mouseleave', this.onHoverOutOfInput);
        e.removeEventListener('mouseenter', this.onHoverOverInput);
      });
    }
    render() {
      const { rowProps, isOver, connectDropTarget, connectDragSource
        } = this.props;
      const { overInput } = this.state;

      return <YourRow
            isOver={isOver}
            ref={instance => {
              this.detachEventListeners(this.node);
              this.node = findDOMNode(instance);

              if (!overInput) {
                connectDragSource(this.node);
                connectDropTarget(this.node);
                this.getInputElements(this.node).map(e => {
                  e.addEventListener('mouseenter', this.onHoverOverInput);
                });
              } else {
                this.getInputElements(this.node).map(e => {
                  e.addEventListener('mouseleave', this.onHoverOutOfInput);
                });
              }
            }}
          />;
    }
}

@gaearonありがとう、その単純で簡単な解決策。 私の日を救った。

こんにちは、私はdndに反応するのは初めてですが、 @ gaearonの回答のように、connectDragSourceを子に渡すにはどうすればよいですか？

@gaearonこのページの問題についてお客様と深刻な問題を抱えていますhttps://react-dnd.github.io/react-dnd/examples-nesting-drag-sources.htmlツリーがあります。 ツリー内で、ドラッグが許可されていないノードがいくつかあります。 canDragはfalseですが、ネストされたDnDを使用しているため、自動的に親に呼び出され、子のドラッグを許可しない代わりに、親をドラッグしました:(。手がかりを教えてくださいデフォルトasking parentを無効にする方法は？。それは顧客から本当に緊急であり、私はまだどのように理解することができません:(

@deanmasterあなたはあなたの問題に対する解決策を持っていますか？