reactjs - 排序后单击网格中的一行时，该行将恢复到原始位置

Question

我必须对我的网格进行排序。然后，如果我单击一行，则应获取其详细信息。

现在，

我整理了我的桌子。然后，如果尝试单击一行（在对一列进行排序后），该行的位置正在改变（恢复到它的原始位置，即未排序的位置）。

仅当对网格应用排序时才会发生这种情况。

这是代码：

class DashboardAddPrintLetterStep4 extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            orderby: '',
            order: {},
            insurance: props.insurance && props.insurance,
        }
        this.sort = this.sort.bind(this);
    }

    componentWillReceiveProps(nextProps) {       
        if(this.state.insurance != nextProps.insurance)
        {
            this.setState({
                insurance: nextProps.insurance && nextProps.insurance
            });
        }
    }

    sort(event){
        const {order} =this.state;
        let { insurance} = this.props;
        order[event.target.id]=! order[event.target.id];
        insurance= _.orderBy(insurance, (o)=> typeof o[event.target.id] === 'string' ? o[event.target.id].trim().toLowerCase() : o[event.target.id], order[event.target.id] ? 'asc' : 'desc');
        this.setState({
            orderby: event.target.id,
            insurance,
            order
        });
    }

    render() {
        const { selectedIns, onSelectInsurance } = this.props;
        const {insurance, order} = this.state;

        return (
            <div >
                    <table >
                        <thead >
                            <tr >
                                <th id='Company'  onClick={this.sort}>Insurance Company {order.Company?<i className="fa fa-sort-asc"/> : <i className="fa fa-sort-desc"/>}</th>
                                <th id='Verified' onClick={this.sort}>Verified {order.Verified?<i className="fa fa-sort-asc"/> : <i className="fa fa-sort-desc"/>}</th>
                            </tr>
                        </thead>
                        <tbody >
                            {insurance && insurance.map(insuranceItem =>
                                <tr key={insuranceItem.InsID} \}
                                    onClick={ () => onSelectInsurance(insuranceItem) }

                                    >
                                    <td  title={insuranceItem.Company ? insuranceItem.Company : insuranceItem.TempInsurance} >{insuranceItem.Company ? insuranceItem.Company : insuranceItem.TempInsurance}</td>
                                    <td >
                                        {insuranceItem.Verified === 1 ? 'Yes' : 'No'}
                                    </td>
                                </tr>
                            )}
                        </tbody>
                    </table>
            </div>
        );
    }
}
const mapStateToProps = state => {
    return {
        insurance: state.patientDetailsReducer.patientDetails.PatientInsuranceModel.Insurance,
        selectedIns: state.printLetterReducer.selectedIns,
    };
};

const mapDispatchToProps = dispatch => {
    return {
        onSelectInsurance: Insurance => {
            dispatch(selectInsurance(Insurance));
        }
    };
};

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(DashboardAddPrintLetterStep4);

例如：1.（排序前的数据）

诺基亚

三星

苹果

2. 排序后

苹果

诺基亚

三星

3. 然后我点击了“诺基亚”行。问题是表格恢复到它的原始位置，就像在步骤 1 中一样，即。

诺基亚

三星

苹果

我该如何解决这个问题，以便在排序后将行固定在同一位置？

标签： reactjssorting