时间戳

首页 > 解决方案 > 在 react-bootstrap-table 的单元格编辑中，在下拉列表中我想要所选值的唯一索引

javascript - 在 react-bootstrap-table 的单元格编辑中，在下拉列表中我想要所选值的唯一索引

问题描述

我有一个正在使用的单元格编辑功能editable={ { type: 'select', options: { values} } }。选择一个值后，我想要它的唯一索引值，因为选项具有共同的值。有什么办法吗？

这是表的代码：

    <BsTable
                        errorMessage={ '' }
                        loading={ false }
                        options={ STATIC_TABLE_OPTIONS }
                        data={ this.state.updatedSteps }
                        rowsCount={ this.state.updatedSteps.length }
                        fetchInfo={ {
                            dataTotalSize: this.state.updatedSteps.length
                        } }
                        cellEdit={ cellEditProp }
                        headerContainerClass="my-header-class"
                        headerStyle={ {
                            fontSize: 'smaller'
                        } }
                        bordered={ false }
                    >
                        <Column dataField="idx" isKey hidden />
                        <Column dataField="selectedBusinessStep"
                            width="15%"
                            editable={ { type:    'select',
                                options: { values: arrBizStep }
                            } }
                        > </BsTable>

在 cellEditProp 中，我的代码是：

const cellEditProp = {
        mode:          'click',
        blurToSave:    true,
        afterSaveCell: ( row, cellName, cellValue ) => {
            this.props.editCombinationHandler( row );
        }
    };

当我从位于以下位置的下拉菜单中更改值时：

<Column dataField="selectedBusinessStep"
                        width="15%"
                        editable={ { type:    'select',
                            options: { values: arrBizStep }
                        } }

我在上面提到的 cellEditProp 中的 afterSaveCell 函数中得到了行、cellName 和 cellValue。有什么方法可以获取下拉列表中所选项目的索引<Column dataField="selectedBusinessStep"。如果您需要更多说明，请告诉我？

标签： javascriptreactjsreact-bootstrap-table

解决方案

这是您在 SELECT 下拉列表中获取所选项目索引的方法。

const cellEditProp = {
    mode: 'click',
    blurToSave: true,
    afterSaveCell: handleChange
};

和handleChange

function handleChange(oldValue, newValue, row, column) {
  let indexOfSelectedItem = -1;
  column.editor.options.forEach((item, idx) => {
    if (newValue === item.value) {
      indexOfSelectedItem = idx;
    }
  });
  if (indexOfSelectedItem > -1) {
    console.log(indexOfSelectedItem);
  }

  // indexOfSelectedItem <<<< 

}

我用 react-bootstrap-table-2 做了这个简单的演示，但同样的逻辑也可以用于以前的版本。希望这可以帮助您解决问题。

单击价格进行编辑并检查控制台输出： https ://codesandbox.io/s/react-bootstrap-table-next-with-editable-price-tgy0y

推荐阅读