在 Office-ui-Fabric - ReactJS 中的 DetailsLists 组件的同一行上添加 EDIT 按钮答案

【问题标题】：Adding a EDIT button on the same row of the DetailsLists component in Office-ui-Fabric - ReactJS在 Office-ui-Fabric - ReactJS 中的 DetailsLists 组件的同一行上添加 EDIT 按钮
【发布时间】：2018-11-03 21:24:09
【问题描述】：

我对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 正在完美填充。但是，现在我想为每一行添加一个“编辑”按钮，所以这不是单独的列。

我想我会在渲染 DetailLists 的 onRenderRow 属性上执行此操作：

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的props，然后添加Edit按钮：

onRenderRows(props) {
        return (
            <div>
                <DetailsRow
                    {...props}

                />
                <PrimaryButton 
                    onClick={() => {
                        alert(props.item.name)
                    }}
                    text='click me' 
                />
            </div>
        )
    }

问题是按钮一直显示在数据行的下方。我应该通过添加css 来解决这个问题，还是让按钮位于同一行的最佳选择是什么？

有没有更简单的方法来做到这一点？我还尝试/研究了为按钮添加额外列的选项，但我不认为这是要走的路，而且我也没有这样做。

作为旁注，我在 ES6 中使用 Fabric 组件而不是 TSX（您可能已经注意到了）。

【问题讨论】：

标签： reactjs ecmascript-6 office-ui-fabric

【解决方案1】：

Add this function
private _onRenderItemColumn(item: any, index: number, column: IColumn): JSX.Element {
        if (column.fieldName === 'fieldName') {
            return <Link data-selection-invoke={true}>{"Edit"}</Link>;
        }
        return item[column.fieldName];
    }

【讨论】：

【解决方案2】：

使用< DetailsList />的onItemInvoked()
为< DetailsList /> 设置列

反应组件：

constructor(props: {}) {
   super(props);
   this._columns = [
      { key: 'index', name: 'No.', fieldName: 'index', isResizable: false },
      { key: 'edit', name: 'Edit', fieldName: 'edit', isResizable: false,
        onRender: (item) => (
           <Link onClick={() => { console.log('clicked', item); }}>Edit</Link>
        ),
      },
   ]
}

【讨论】：