我对office ui fabric-react 很陌生,而且一般都会做出反应,所以如果我做错了,请不要犹豫,给我指点。
尽管我的要求相当简单,但我就是想不通。
我有一个带有列表视图的页面(office-ui-fabric-reactjs 的 DetailsList 组件),这个 DetailsList 从运行正常的 API 端点获取它的项目:
componentDidMount() {
_items = []
// Get list of Mediums, then push it to the _items array
axiosTRS.get('/media').then(response => {
response.data.map(item => {
_items.push({ id: item.mediumID, name: item.name, imo: item.imo })
})
this.setState({ items: _items })
})
}
DetailsList 被完美填充。但是,现在我想为每一行添加一个“编辑”按钮,所以这不是单独的列。
我想我会onRenderRow
在 DetailLists 呈现的属性上执行此操作:
render() {
return (
<div>
<Panel panelHeaderName={'Medium Overview'}>
<div>
<MarqueeSelection selection={this.selection} >
<DetailsList
onRenderRow={this.onRenderRows}
onRenderDetailsHeader={this.onRenderColumn}
selection={this.selection}
selectionMode={this.state.selectionMode}
onColumnHeaderClick={this.sorting}
onColumnResize={this.columnResizer}
layoutMode={DetailsListLayoutMode.justified}
className='customPanel'
columns={this.state.columns}
items={this.state.items}
// onRenderItemColumn={ this._onRenderColumn }
/>
</MarqueeSelection>
<br />
<div align="right">
</div>
</div>
</Panel>
</div>
)
}
在onRenderRows
函数中我首先获取所有的DetailsRow
道具,然后添加编辑按钮:
onRenderRows(props) {
return (
<div>
<DetailsRow
{...props}
/>
<PrimaryButton
onClick={() => {
alert(props.item.name)
}}
text='click me'
/>
</div>
)
}
问题是按钮一直显示在数据行下方。我应该通过添加来解决这个问题,css
还是让按钮位于同一行的最佳选择是什么?
有没有更简单的方法来实现这一点?我还尝试/研究了为按钮添加额外列的选项,但我不认为这是要走的路,而且我也没有这样做。
附带说明一下,我在 ES6 中使用结构组件而不是 TSX(您可能已经注意到了)。