React ソート可能な注文の問題

debugcn 投稿 Dev

Vanojx1

GIF でわかるように、リスト内のアイテムを注文すると、プレースホルダー要素が他の要素と重なるように見えます。私のコードロジックは、例とまったく同じです。

灰色の背景は絶対配置要素です。

これは私の実際のコードです:

const DragHandleElement = SortableHandle(() => <span style={handleStyle} ><DragHandle /></span>);

const SortableItem = SortableElement(({content}) => {
  return (
    <div style={menuItemStyle}>
      <DragHandleElement />
      <div style={menuContentStyle}>
        {Utils.getMainDesc(content)}
      </div>
    </div>
  );
});

class VirtualList extends Component {
  render() {
    let {items} = this.props;

    return (
      <AutoSizer>
        {({ width, height }) => (
          <List
            ref={(instance) => {
              console.log(instance);
              this.List = instance;
            }}
            rowHeight={80}
            rowRenderer={({index}) => {
              let {content} = items[index];
              return <SortableItem key={'sort_item_'+index} index={index} content={content} />;
            }}
            rowCount={items.length}
            height={height}
            width={width}
          />
        )}
      </AutoSizer>
    );
  }
}

const SortableList = SortableContainer(VirtualList, {withRef: true});

<SortableList 
  ref={(instance) => {
    this.SortableList = instance;
  }}
  lockAxis='y'
  useDragHandle={true}
  items={menu.content}
  onSortEnd={({oldIndex, newIndex}) => this.props.onSortEnd(oldIndex, newIndex, this.SortableList)}
  helperClass={'higher'}
/>

Vanojx1

絶対配置要素内でソート可能なコンポーネントを使用しているため、コンテナへの参照が必要です。getContainer プロパティを追加すると、私の問題は解決しました。

<SortableList 
  ....
  getContainer={() => {
    return ReactDOM.findDOMNode(this.refs['menu'])
  }}
/>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-08-3

コメントを追加

サインイン

分類Dev

単純なReactコンポーネントの問題

分類Dev

画像要素と React のソースの問題

分類Dev

React.js単純なコンポーネント構成の問題

分類Dev

React + NodeJsFetchの問題

分類Dev

React NativeSortingの問題

分類Dev

React + ReduxUpdateの問題

分類Dev

React Native + React I18next + React Navigation、navigationOptionsアップデートの問題

分類Dev

Reactオートコンプリート値の問題

分類Dev

jQueryUIソート可能な接続リストcssの問題

分類Dev

ホワイトスペースの問題-Reactルーター

分類Dev

React.jsバギーでソート可能なjQueryUI

分類Dev

React setState 関数の些細な問題

分類Dev

React Routerv4-ネストルートの問題

分類Dev

react-addons-transition-groupのインストールの問題

分類Dev

Reactファイルのインポートの問題

分類Dev

react-nativeでのreact-native-elementsのインストールの問題

分類Dev

Reactルーターの問題

分類Dev

Reactコンポーネントルートの何が問題になっていますか？

分類Dev

ルートにないときにコンポーネントを表示するreact-routerの問題

分類Dev

reactのuseStateで注文にアイテムを追加する際の問題

分類Dev

コンポーネントが更新されない場合のreact-routerルーティングの問題

分類Dev

React-router-dom-同じルートの問題

分類Dev

Mobx / Reactアップデートの問題

分類Dev

React-ネイティブインストールの問題

分類Dev

firebase + reactに関するチュートリアルの問題

分類Dev

コード分割/ react-loadableの問題

分類Dev

React-google-mapsズームの問題

分類Dev

ReactのLocalStorageの問題

分類Dev

React for restapiのComponentDidMountの問題

Related 関連記事

記事