5

私は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 でファブリック コンポーネントを使用しています (お気づきかもしれませんが)。

4

2 に答える 2