react-data-grid -你能把你自己的组件添加到工具栏吗？

Question

我目前正在使用react-data-grid，而且我已经差不多完成了……我在工具栏中显示了filters按钮。我需要另一个按钮来影响表中所有选定的项，我想将其添加到工具栏的左侧，以节省空间。有没有人知道用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

如果您查看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>);
   }
 });