鍍金池/ 問答/HTML/ expandedRowRender ,onexpand,expandedRowK

expandedRowRender ,onexpand,expandedRowKeys,同時(shí)使用發(fā)生沖突?!

expandedRowRender ,onexpand,expandedRowKeys,同時(shí)使用發(fā)生沖突?!
  • showListDom:存放展開行數(shù)據(jù)
  • expandedFunction:請(qǐng)求后端數(shù)據(jù)
  • arr:存放當(dāng)前行的id數(shù)組(只有一項(xiàng))

render方法內(nèi):

<Table
    dataSource={this.state.SampleData}
    rowKey={record => record.id || record.key}
    columns={columns}
    onChange={this.handleStandardTableChange}
    pagination={this.state.pagination}
    loading={this.state.loading}
    expandedRowRender={(record) => { return this.state.showListDom[record.id] || null; }}
    onExpand={(expanded, record) => { return this.expandFunction(expanded, record) || null;}}
   expandedRowKeys={this.state.arr}//加上這行就報(bào)錯(cuò)
  />


報(bào)錯(cuò)信息:

clipboard.png


想要達(dá)到的效果是:點(diǎn)擊一行時(shí),其他行自動(dòng)收縮,每次只展開一行。
不加expandedRowkeys時(shí),可以達(dá)到效果:在一行(a行)展開的情況下,去點(diǎn)擊另一行(b行)的“+”展開符,b行可以得到數(shù)據(jù)并展開,同時(shí),a行數(shù)據(jù)被置為空,但并未收縮(展開符仍是”+”,下方顯示空表)
回答
編輯回答
尛憇藌

用state里面的arr直接存儲(chǔ)expandedrowKeys,
this.state.arr是這樣的:空、不空、空、不空...
使其處于不穩(wěn)定的狀態(tài),應(yīng)該使用穩(wěn)定的數(shù)組存儲(chǔ),然后定期賦值給state里面的expandedrowskeys
this.state.expandedrowsKeys是始終有一項(xiàng)值的

2018年1月20日 06:24