javascript - React-bootstrap-table - 仅在行单击后展开组件，默认情况下不展开

Question

我正在使用 react-bootstrap-table 来扩展行并显示其中的数据。

这是我的代码：

class PhoneSystem extends Component {

  isExpandableRow(row) {
    if (row.uniqueid > 0) return true;
    else return false;
  }

//this is called when user clicks a row
  onRowClick(row) {
      console.log("Inside row click",row.uniqueid);
      return this.expandComponent(row.uniqueid);
  }

  expandComponent(row) {
    console.log("Inside expand component:::::);
 }

  render() {
    
    const options = {
      onRowClick: this.onRowClick.bind(this),
    }
    
    return (
      <React.Fragment>
        <div className="animated fadeIn">
          <Row>
            <Col lg="12">
              <Card style={{ marginBottom: '100px' }}>
                <CardHeader>
                  <h5>Phone system</h5>
                </CardHeader>
                  <BootstrapTable data={this.state.productsData}  options={options} remote={true} striped hover search pagination = {true} fetchInfo={{ dataTotalSize: this.state.totalCount }}        
                  expandableRow={ this.isExpandableRow }
                  expandComponent={this.expandComponent.bind(this)}       
                  expandColumnOptions={ { expandColumnVisible: true } }>

                  <TableHeaderColumn isKey dataField="uniqueid" dataSort width="8%" tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>Call Unique Id</TableHeaderColumn>
                  <TableHeaderColumn dataField="userfield" dataSort={true} width="13%">Call Type</TableHeaderColumn>
                  <TableHeaderColumn dataField="callee_number" dataSort width="10%">Source</TableHeaderColumn>
                  <TableHeaderColumn dataField="action_type" dataSort width="17%">Action Type</TableHeaderColumn>
                  <TableHeaderColumn dataField="caller_number" dataSort width="8%">Destination</TableHeaderColumn>
                  <TableHeaderColumn dataField="start_time" dataSort width="8%">Start Time</TableHeaderColumn>
                  <TableHeaderColumn dataField="disposition" dataSort width="8%">Disposition</TableHeaderColumn>
                  <TableHeaderColumn dataField="talk_time" dataSort width="17%">Duration</TableHeaderColumn>
                </BootstrapTable>
              </Card>
            </Col>
          </Row>
        </div>
      </React.Fragment>
    );
  }
}

这是我的输出：

现在，正如您在输出控制台中看到的那样，展开组件函数在单行单击时被调用，并再次被调用 10 次。我希望仅在单击行后才调用展开组件函数。

所以我尝试expandComponent={this.expandComponent.bind(this)}从 BootstrapTable 组件中删除默认值

一旦我从 BootstrapTable 组件中删除 expandComponent ，它就会向我抛出错误：

this.props.expandComponent 不是一个函数。

有什么解决方案吗？提前致谢。

标签： javascriptreactjsbootstrap-tablereact-bootstrap-table

Answer 1

试试下面

expandableRow={(row) => {
  return this.isExpandableRow(row);
}}

expandComponent={(row) => {
  return this.expandComponent(row);
}}