Question

我有一个填充网格，通过使用addazle的react-data-grid，我尝试选择一个单元格，并弹出一个模块，其中包含来自该单元格的数据。我有enableCellSelect = {true}，我知道我需要使用React.createClass，但我不知道从那里去哪里。提前谢谢！

    let onClick = React.createClass({
        render(){
            return(
                <div onClick={this.showModal}>

                </div>
            )
        }
    })




  export class Modal extends Component{
        constructor(props){
            super(props)
            this.state={}
        }

     render(){
      return(
        <div>
          <ReactDataGrid
            enableCellSelect={true}
            columns={columns}
            rowGetter={this.getRows}
            rowsCount={this.state.rows.length}
            getSubRowDetails={this.getSubRowDetails}
            onCellExpand={this.onCellExpand}
            minHeight={500}
          />
        </div>
    )
  }
}

Answer 1

您是否阅读过react-data-grid网页上的示例？您可以在此处找到您的解决方案：http://adazzle.github.io/react-data-grid/examples.html#/cell-selection-events

您创建了一个函数onCellSelected：

onCellSelected = ({ rowIdx, idx }) => {
  this.grid.openCellEditor(rowIdx, idx);
};

调用组件时

<ReactDataGrid
      ref={ node => this.grid = node }
      rowKey="id"
      columns={this._columns}
      rowGetter={this.rowGetter}
      rowsCount={this._rows.length}
      enableRowSelect="multi"
      minHeight={500}
      onRowSelect={this.onRowSelect}
      enableCellSelect={true}
      onCellSelected={this.onCellSelected}
      onCellDeSelected={this.onCellDeSelected} />

下面是链接的完整示例：

const ReactDataGrid = require('react-data-grid');
const exampleWrapper = require('../components/exampleWrapper');
const React = require('react');

class Example extends React.Component {
  constructor(props) {
    super(props);
    this._columns = [
      { key: 'id', name: 'ID' },
      { key: 'title', name: 'Title', editable: true },
      { key: 'count', name: 'Count' }
    ];

    let rows = [];
    for (let i = 1; i < 1000; i++) {
      rows.push({
        id: i,
        title: 'Title ' + i,
        count: i * 1000,
        active: i % 2
      });
    }

    this._rows = rows;

    this.state = { selectedRows: [] };
  }

  rowGetter = (index) => {
    return this._rows[index];
  };

  onRowSelect = (rows) => {
    this.setState({ selectedRows: rows });
  };

  onCellSelected = ({ rowIdx, idx }) => {
    this.grid.openCellEditor(rowIdx, idx);
  };

  onCellDeSelected = ({ rowIdx, idx }) => {
    if (idx === 2) {
      alert('the editor for cell (' + rowIdx + ',' + idx + ') should have just closed');
    }
  };

  render() {
    const rowText = this.state.selectedRows.length === 1 ? 'row' : 'rows';
    return  (
      <div>
        <span>{this.state.selectedRows.length} {rowText} selected</span>
        <ReactDataGrid
          ref={ node => this.grid = node }
          rowKey="id"
          columns={this._columns}
          rowGetter={this.rowGetter}
          rowsCount={this._rows.length}
          enableRowSelect="multi"
          minHeight={500}
          onRowSelect={this.onRowSelect}
          enableCellSelect={true}
          onCellSelected={this.onCellSelected}
          onCellDeSelected={this.onCellDeSelected} />
      </div>);
  }
}

const exampleDescription = (
  <div>
    <p>Define onCellSelected and onCellDeSelected callback handlers and pass them as props to enable events upon cell selection/deselection.</p>
    <p>if passed, onCellSelected will be triggered each time a cell is selected with the cell coordinates. Similarly, onCellDeSelected will be triggered when a cell is deselected.</p>
  </div>
);

module.exports = exampleWrapper({
  WrappedComponent: Example,
  exampleName: 'Cell selection/delesection events',
  exampleDescription,
  examplePath: './scripts/example21-cell-selection-events.js',
  examplePlaygroundLink: 'https://jsfiddle.net/f6mbnb8z/8/'
});

如何使用react-data-grid选择单个单元格并在其他位置使用该单元格中的数据

1 个答案: