Добавление кнопки EDIT в ту же строку компонента DetailsLists в Office-ui-Fabric - ReactJS - PullRequest
Новая
       4

Добавление кнопки EDIT в ту же строку компонента DetailsLists в Office-ui-Fabric - ReactJS

0 голосов
/ 24 мая 2018

Я очень плохо знаком с офисным пользовательским интерфейсом, реагирую и реагирую вообще, поэтому не стесняйтесь указывать мне, если я делаю это совершенно неправильно.

Хотя мое требование довольно простое, я просто не могу его понять.

У меня есть страница с представлением списка (Компонент DetailsList из office-ui-fabric-Reactionjs), этот 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, а затем добавляю кнопку Edit: 

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

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

Проблема в том, что кнопка продолжает отображаться под строкой сданные.Должен ли я исправить это, добавив css, или как мне лучше всего получить кнопку в той же строке?

Есть ли более простой способ сделать это?Я также попробовал / исследовал возможность добавления дополнительного столбца для кнопок, но я не думаю, что это правильный путь, и у меня это тоже не получилось.

В качестве дополнительного примечания я использую тканевые компоненты с ES6 вместо TSX (как вы, вероятно, заметили).

Ответы [ 2 ]

0 голосов
/ 23 июля 2019
  1. с помощью onItemInvoked () из < DetailsList />
  2. установочные столбцы для < 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>
        ),
      },
   ]
}
0 голосов
/ 26 мая 2018 
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];
    }
...