私は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
ありますか、または同じ行にボタンを取得するための最良のオプションは何ですか?
これを達成する簡単な方法はありますか?また、ボタンに列を追加するオプションを試したり調査したりしましたが、これは道だとは思いませんし、うまくいきませんでした。
ちなみに、私は TSX ではなく ES6 でファブリック コンポーネントを使用しています (お気づきかもしれませんが)。