react-data-grid - 您可以将自己的组件添加到工具栏吗？

Question

我目前正在使用 react-data-grid 并且几乎完成了...我在工具栏中显示了过滤器按钮。我需要另一个按钮来影响表格中的所有选定项目，我想将它添加到工具栏的左侧，以节省空间。有谁知道用 react-data-grid 做到这一点的方法吗？

我查看了 github 中的代码，我看到了 Toolbar 项，它似乎非常特定于 react-data-grid，但也有 AdvancedToolbar 项，我不确定是否是可用于将您自己的自定义项添加到 react-data-grid 的东西。

没有任何使用 react-data-grid 示例添加自定义按钮或组件的示例，但我想知道是否有其他人做过类似的事情并可以分享你是如何完成的。谢谢。

我尝试了使用GroupedColumnPanels 之类的建议解决方案，但对于添加通用按钮对象之类的方法似乎并不相同，如下所示：

const customToolbar = (<Toolbar>
            <button type="button" className="btn btn-success" style={{ marginRight: '5px' }} onClick={this.handleRefresh}>
                <i className="glyphicon glyphicon-refresh" /> Refresh
            </button>
            <button type="button" className="btn btn-warning" style={{ marginRight: '5px' }} onClick={this.handleReset}>
                <i className="glyphicon glyphicon-warning-sign" /> Reset Page
            </button>
            <button type="button" className="btn btn-danger" onClick={this.handleHideRows}>
                <i className="glyphicon glyphicon-eye-close" /> Hide Selected
            </button>
        </Toolbar>);

如果有人能帮我解决这个问题...我将不胜感激。

Answer 1

您可以尝试扩展工具栏以添加您的新功能，然后覆盖渲染方法，例如：

export class CustomToolbar extends Toolbar {
  onDeleteRow(e) {
    if (this.props.onDeleteRow !== null && this.props.onDeleteRow instanceof Function) {
      this.props.onDeleteRow(e);
    }
  }

  renderDeleteRowButton() {
    if (this.props.onDeleteRow ) {
      return (<button type="button" className="btn" onClick={this.onDeleteRow.bind(this)}>
        {this.props.deleteRowButtonText}
    </button>);
    }
  }

  render() {
    return (
      <div className="react-grid-Toolbar">
        <div className="tools">
        {this.renderAddRowButton()}
        {this.renderDeleteRowButton()}
        {this.renderToggleFilterButton()}
        </div>
      </div>);
  }
}

然后你的组件会是这样的：

export class MyGridComponent extends React.Comopnent {
  // other code 
  handleDeleteRow(e) {
    console.log("deleting selected rows ", e)
    // handle the deletion
  }
  render() {
    return (<ReactDataGrid
      // other properties
      toolbar={<CustomToolbar onAddRow={this.handleAddRow.bind(this)}
            onDeleteRow={this.handleDeleteRow.bind(this)}
            deleteRowButtonText="Delete Selected"></CustomToolbar>}
    />)
  }
}

看起来AdvancedToolbar 可能正在尝试做这样的事情，但它没有继承工具栏的添加行或过滤器选项，并且子项呈现在空的工具栏 div 之外。

Answer 2

如果您查看 repo 以添加 react 数据网格：

https://github.com/adazzle/react-data-grid/blob/next/packages/react-data-grid-addons/src/toolbars/Toolbar.js

它会渲染您传递给 Toolbar 组件的所有子组件。

render() {
    return (
      <div className="react-grid-Toolbar">
        <div className="tools">
          {this.renderAddRowButton()}
          {this.renderToggleFilterButton()}
          {this.props.children}
        </div>
      </div>
    );
  }
}

所以你可以像这样传递任何你想要的按钮：

<Toolbar> <ButtonComponent /></Toolbar>

只要您的按钮有自己的独立状态，这应该可以工作。

干杯，

马特

Answer 3

是的，您可以像在Row Grouping Example 中那样做。

var CustomToolbar = React.createClass({
   render() {
     return (<Toolbar>
       <GroupedColumnsPanel groupBy={this.props.groupBy} 
                            onColumnGroupAdded={this.props.onColumnGroupAdded} 
                            onColumnGroupDeleted={this.props.onColumnGroupDeleted}/>
       </Toolbar>);
   }
 });

Answer 4

根据docs尝试使用flexibleSpaceComponent prop

const ToolbarFlexibleSpace = () => (
  <div>
    <button type="button" className="btn btn-success" style={{ marginRight: '5px' }} onClick={this.handleRefresh}>
      <i className="glyphicon glyphicon-refresh" /> Refresh
    </button>
    <button type="button" className="btn btn-warning" style={{ marginRight: '5px' }} onClick={this.handleReset}>
      <i className="glyphicon glyphicon-warning-sign" /> Reset Page
    </button>
    <button type="button" className="btn btn-danger" onClick={this.handleHideRows}>
      <i className="glyphicon glyphicon-eye-close" /> Hide Selected
    </button>
  </div>
);

const MyToolbar = (
  <Toolbar
    flexibleSpaceComponent={ToolbarFlexibleSpace}
  />
);