web-dev-qa-db-ja.com

列のCSSを変更する方法-ReactTable

アプリケーションで react-table を使用しています。

列のサイズを変更しているときに、CSSのcolumnsを変更するなど、1つのことを行うことにこだわっています。

現在、resize列のみcursorが変更された場合。私が欲しいのは、borderをselected columnに追加することです。

これをSOとgoogleでも検索しました。しかし、有用なものを見つけることができませんでした。また、ドキュメントでも、このトピックについては何も言及されていません。

更新

サイズ変更中に列をドラッグしながら境界線を追加できるようになりました。クラスを追加および削除することにより、これを行うことができます。

私がそうするためにしたこと：

ClassNameの状態で変数を作成しました：

  this.state = {
         addBorder: null
   }

私のコラムでこのクラス名を渡しました：

     const columns = [{
    Header: 'Name',
    accessor: 'name', // String-based value accessors!,
    headerClassName: this.state.addBorder,
    className: this.state.addBorder
}, {
    Header: 'Age',
    accessor: 'age',
    Cell: props => <span className='number'>{2}</span> // Custom cell components!
}, {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Friend Name',
    accessor: d => d.friend.name // Custom value accessors!
}, {
    Header: props => <span>Friend Age</span>, // Custom header components!
    accessor: 'friend.age'
}];

return (
    <div onMouseUp={this.handleMouseUp}>
    <ReactTable
        data={data}
        columns={columns} 
        resizable={true}
        onResizedChange={(col, e) => {
            const column = col[col.length-1];
            this.setState({addBorder: column.id})
        }} />
        </div>
)
}

ドラッグの終了時にクラスを削除するには：

   handleMouseUp (e) {
    this.setState({addBorder: null});
}

しかし、私はまだホバーに境界線を追加することはできません。

現在、ヘッダーの小道具でカスタムHTMLを送信しています。また、HTMLに追加のdivを作成しました。そして、このdivを右に移動しました。このdivにカーソルを合わせると、マウスイベントが発生し、それに応じてCSSが変更されます。

しかし、列のサイズ変更を行うヘッダー内の既存のdivは、私のDivと重複しています。

  Header: props => <div className='header-div'> Name <div onMouseOver = {() => {
        console.log('mose');
        this.setState({className: 'addBorder'});
    }} className='hover-div' onMouseOut = {() => {console.log('sdasd');this.setState({className: null});}}> </div></div> ,
cssreactjsresizereact-table
9
Dalvik

私が理解していることから、列ヘッダーにカーソルを合わせると境界線が追加されます。私の理解が正しければ、:hoverヘッダークラ​​スの擬似セレクター

.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}

更新：

React-tableによって公開されるonResizedChangeハンドラーで状態を操作できます

onResizedChange={(newResized, event) => {
  let resizedCol = newResized.slice(-1)[0].id;
  if(this.state.activeCol !== resizedCol) {
    this.setState({
      activeCol: resizedCol,
      resizing: true
    })
  }
}}

また、resizingイベントでfalse状態をmouseupにする必要があることを確認してください。そのために、以下の解決策を思いつきました。

componentDidUpdate(props, state) {
  if (this.state.resizing && !state.resizing) {
    document.addEventListener('mouseup', this.onMouseUp);
  } else if (!this.state.resizing && state.resizing) {
    document.removeEventListener('mouseup', this.onMouseUp);
  }
}

onMouseUp = (evt) => {
  this.setState({
    activeCol: '',
    resizing: false
  });
  evt.stopPropagation();
  evt.preventDefault();
}

参考のために：

const ReactTable = window.ReactTable.default

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      activeCol: '',
      resizing: false
    }
  }
  
  componentDidUpdate(props, state) {
    if (this.state.resizing && !state.resizing) {
      document.addEventListener('mouseup', this.onMouseUp);
    } else if (!this.state.resizing && state.resizing) {
      document.removeEventListener('mouseup', this.onMouseUp);
    }
  }
  
  onMouseUp = (evt) => {
    this.setState({
      activeCol: '',
      resizing: false
    });
    evt.stopPropagation();
    evt.preventDefault();
  }
  
  render() {
    const data = [{
      name:"Mark",
      age:24
    },
    {
      name:"Derek",
      age:26
    }]

    const columns = [{
          Header: 'Name',
          accessor: 'name', // String-based value accessors!,
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'name') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }, {
          Header: 'Age',
          accessor: 'age',
          headerClassName: 'hdrCls',
          className: (this.state.activeCol === 'age') && this.state.resizing ? 'borderCellCls' : 'defaultCellCls'
      }];

    return <ReactTable
      data = { data }
      columns = { columns }
      showPagination= {false}
      onResizedChange={(newResized, event) => {
        let resizedCol = newResized.slice(-1)[0].id;
        if(this.state.activeCol !== resizedCol) {
          this.setState({
            activeCol: resizedCol,
            resizing: true
          })
        }
      }}
    />
  }
}

ReactDOM.render( < App / > , document.getElementById("app"))
.hdrCls:hover {
  border: 2px solid rgba(0,0,0,0.6) !important;
}


.borderCellCls {
  border-right: 2px solid rgba(0,0,0,0.6) !important;
  border-left: 2px solid rgba(0,0,0,0.6) !important;
}

.defaultCellCls {
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link>
<div id="app"></div>

CSSをいじることができます。これがあなたの望むものであり、これが役立つことを願っています。

更新：

私はあなたが望むものを達成するためにCSSで遊ぶ必要があると思います。

.borderCellCls {
   border-right: 2px solid rgba(0,0,0,0.6) !important;
   border-left: 2px solid rgba(0,0,0,0.6) !important;
}
5
Dev