在react-bootstrap-table的Cell编辑中，在下拉菜单中，我希望所选值的唯一索引

Question

我具有单元格编辑功能，其中使用了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 );
        }
    };

当我从位于以下位置的dropDown更改值时：

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

我在afterSaveCell函数中获取行，cellName和cellValue，该函数位于上述cellEditProp中。 有什么方法可以获取下拉菜单<Column dataField="selectedBusinessStep"的所选项目的索引。 请让我知道您是否需要更多说明？

Answer 1

这样可以在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