Question

我使用Mobx和React。我有一个组件UserLicense，其中包含一个表格，其中包含我的所有许可证以及按许可证划分的总广告。我还有另一个组件TableListLicense，它负责打印表。在此组件中，此组件的表是带有手风琴的引导表（折叠表）。当我单击一行时，我必须给后端打电话，并告诉我广告的详细信息。我需要该行的ID来调用后端。我和我必须将结果打印在手风琴中（下拉到被选中的行下方）。我有两个问题： 1-我可以在控制台中打印广告的所有详细信息，但是当我返回handleOnclick无效时，请勿打印任何内容 2-当我单击2次一行时，该行消失了

用户授权许可

import React, { Component } from "react";
import { observer, inject } from 'mobx-react'
import TableListLicense1 from './TableListLicense1';

@inject("licenseStore", "sessionStore")
@observer

class UserLicense extends Component {

  async componentDidMount() {

    let { match: { params: { username } } } = this.props
    await this.props.licenseStore.getLicensesByUsername(username)
  }

  render() {

    if (this.props.sessionStore.initialized) {
      return (<>
        <table className="table table-bordered table-hover"  >
          <thead >
            <tr >
              <th scope="col"></th>
              <th scope="col"></th>
              <th scope="col"> LICENSE</th>
              <th scope="col">TOTAL ADS</th>
            </tr>
          </thead>
          <tfoot>
            <tr >
              <th scope="col"></th>
              <th scope="col"></th>
              <th scope="col">LICENSE</th>
              <th scope="col">TOTAL ADS</th>
            </tr>
          </tfoot>
            {this.props.licenseStore.licenses ? this.props.licenseStore.licenses.map((data, i) => {
              return (<>
                <TableListLicense1 data={data} i={i} key={i} username={this.props.match.params.username} />
              </>)
            }) : null}
        </table>

      </>)
    }
  }
}
export default UserLicense

组件列表许可

import React, { Component } from "react";
import { inject, observer } from 'mobx-react'


@inject("licenseStore")
@observer

class TableListLicense1 extends Component {

  handleOnclick = async (e) => {
    e.preventDefault()
    let username = this.props.username
    let id = e.target.getAttribute('data')
    let ads = await this.props.licenseStore.getAdsByLicenseId(username, id)

    return (<>
      {(ads) ? ads.map((data, i) => {

          return (<>
            <tbody id={data._id} className="collapse-show">
              <tr key={data.name}>
                <td>{data.name}</td>
                <td>{data.city}</td>
                <td>{data.license.code}</td>
                <td>{data.administrativeOptions.workingUser}</td>
              </tr>
            </tbody>
          </>)
        }) : null
      }
    </>)
  }

  render() {
    let data = this.props.data
    let i = this.props.i
    let dataTarget = '#' + this.props.data._id

    return (<>
      <tbody>
        <tr key={data._id} onClick={async (e) => {this.handleOnclick(e) }} id={data._id} className="clickable-row" data-toggle="collapse" data-target={dataTarget} aria-expanded="false" aria-controls={data._id} >
          <td data={data._id}><i className="fas fa-plus" aria-hidden="true" data={data._id}></i></td>
          <td data={data._id}>{i + 1}</td>
          <td data={data._id}>{data._id}</td>
          <td data={data._id}>{data.count}</td>
        </tr>
      </tbody>
    </>)
  }
}
export default TableListLicense1

Mobx反应handleonClick返回无效，并且bootstrap崩溃行无效

0 个答案: