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

Question

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

我看了github里的代码，看到了Toolbar项，好像是react-data-grid特有的，但是还有AdvancedToolbar项，不知道是不是可用于将您自己的自定义项目添加到 react 数据网格的东西。

没有任何使用 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 之外。