Question

我是新来的人。

我有一张桌子，

const tableone = props => {
  return (
    <div className="row">
      <div className="col-12">
        <div className="table-responsive">
          <table className="table table-hover" id="dashboard">
            <thead>
              <tr className="text-center">
                <th></th>
                <th scope="col">Recruiter Name
            </th>
                <th scope="col">Number of ID
            </th>
                <th scope="col">Yesterday's Final Score
            </th>
                <th scope="col">Score added today
            </th>
                <th scope="col">Updo Date Final Score
            </th>
              </tr>
            </thead>
            <tbody className="text-center">
                {props.data && props.data.length > 0 && props.data.map((item, key) => {
                  return (
                    <tr key={key}>
                      <td align="center">
                        <input type="checkbox"/>
                      </td>
                      <td>
                        {item.name}
                      </td>
                      <td className="font-weight-bold">{item.noc}</td>
                      <td>{item.final}</td>
                      <td className="font-weight-bold">{item.today}</td>
                      <td className="font-weight-bold">{item.upto}</td>
                    </tr>
                  )
                })}
              </tbody>
          </table>
        </div>
      </div>
    </div>
  );
};

现在，在单击第一个TD的item.name时，现在，在单击此TD时，我尝试打开一种新的表accordion。所以，

我的另一张桌子在

中

another component.

const JobsTable = props => {
  return (
    <div className="table-responsive">
      <table className="table table-hover" id="dashboard">
        <thead>
          <tr className="text-center">
            <th scope="col">Technology
            </th>
            <th scope="col">Total Resumes
            </th>
            <th scope="col">Job Title
            </th>
            <th scope="col">Total Score
            </th>
            <th scope="col">Average Score
            </th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  )
}

export default JobsTable;

因此，在这里，我该如何以一种反应的方式呈现此TD的onClick组件。我曾尝试过使用一个反应手风琴的库，但我认为，为此使用库并不是一个好主意。那么，有人可以帮我吗？谢谢。

Answer 1

我认为最简单的方法如下：

更改您的商品名称单元以添加交互：

<script type="text/javascript">

    $(document).ready(function() {
        $("#shoppingCart")
            .bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    <c:forEach items="${cart.cart}" var="item" varStatus="status">
                        quantity${status.index+1}: {
                            validators: {
                                between: {
                                    min: 1,
                                    max: 3,
                                    message: 'The quantity should be between 1 and 3  '
                                },
                                notEmpty: {
                                    message: 'The quantity is required'
                                },
                                integer: {
                                    message: 'The value is not an integer'
                                }
                            }
                        }
                    </c:forEach>
                }

            })      
    });


    </script>

功能：

<td onClick={()=>this.toggleJobsTable()}>
    {item.name}
</td>

请不要忘记在tableone组件的状态下将jobsTableVisible的初始值设置为false。向组件添加一个构造函数并设置初始状态

toggleJobsTable() {
   this.setState({
      jobsTableVisible: !this.state.jobsTableVisible
   });
}

然后在JobsTable组件中返回之前添加检查：

this.state = {
    jobsTableVisible: false
}

并更新此部分：

let visibleClass = " hidden";
if (this.props.jobsTableVisible) {
    visibleClass = "";
}

对此：

<div className="table-responsive">

别忘了将jobsTableVisible属性传递给JobsTable，您就很好了。

Answer 2

使用state activeId and display innertable。这是可行的示例。

const data = [
  {
    name: "Rama singh1",
    noc: "noc1",
    final: "final1",
    today: "today1",
    upto: "upto1"
  },
  {
    name: "Rama singh2",
    noc: "noc2",
    final: "final2",
    today: "today2",
    upto: "upto2"
  },
  {
    name: "Rama singh3",
    noc: "noc3",
    final: "final3",
    today: "today3",
    upto: "upto3"
  },
  {
    name: "Rama singh4",
    noc: "noc4",
    final: "final4",
    today: "today4",
    upto: "upto4"
  }
];

const JobsTable = props => (
  <div className="table-responsive">
    <table className="table table-hover" id="dashboard">
      <thead>
        <tr className="text-center">
          <th scope="col">Technology</th>
          <th scope="col">Total Resumes</th>
          <th scope="col">Job Title</th>
          <th scope="col">Total Score</th>
          <th scope="col">Average Score</th>
        </tr>
      </thead>
      <tbody />
    </table>
  </div>
);
const Tableone = props => (
  <div className="row">
    <div className="col-12">
      <div className="table-responsive">
        <table className="table table-hover" id="dashboard">
          <thead>
            <tr className="text-center">
              <th />
              <th scope="col">Recruiter Name</th>
              <th scope="col">Number of ID</th>
              <th scope="col">Yesterday's Final Score</th>
              <th scope="col">Score added today</th>
              <th scope="col">Updo Date Final Score</th>
            </tr>
          </thead>
          <tbody className="text-center">
            {props.data &&
              props.data.length > 0 &&
              props.data.map((item, key) => {
                return (
                  <React.Fragment key={key}>
                    <tr key={key} onClick={() => props.clickHandler(key)}>
                      <td align="center">
                        <input type="checkbox" />
                      </td>
                      <td>{item.name}</td>
                      <td className="font-weight-bold">{item.noc}</td>
                      <td>{item.final}</td>
                      <td className="font-weight-bold">{item.today}</td>
                      <td className="font-weight-bold">{item.upto}</td>
                    </tr>
                    {props.activeId === key ? (
                      <tr>
                        <JobsTable />
                      </tr>
                    ) : null}
                  </React.Fragment>
                );
              })}
          </tbody>
        </table>
      </div>
    </div>
  </div>
);
class App extends React.Component {
  state = {
    activeId: ""
  };
  clickHandler = id => {
    if (id === this.state.activeId) this.setState({ activeId: "" });
    else this.setState({ activeId: id });
  };
  render() {
    return (
      <Tableone
        data={data}
        activeId={this.state.activeId}
        clickHandler={this.clickHandler}
      />
    );
  }
}
ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root' />

Answer 3

这是完整的代码。

const JobsTable = props => {
      return (
        <div className="table-responsive">
          <table className="table table-hover" id="dashboard">
            <thead>
              <tr className="text-center">
                <th scope="col">Technology</th>
                <th scope="col">Total Resumes</th>
                <th scope="col">Job Title</th>
                <th scope="col">Total Score</th>
                <th scope="col">Average Score</th>
              </tr>
            </thead>
            <tbody />
          </table>
        </div>
      );
    };

    class Tableone extends React.Component {
      constructor(props, context) {
        super(props, context);
        this.state = {
          showAcc: false
        };
      }

      toggleJobs = () => {
        this.setState({ showAcc: !this.state.showAcc });
      };

      render() {
        return (
          <div className="row">
            <div className="col-12">
              <div className="table-responsive">
                <table className="table table-hover" id="dashboard">
                  <thead>
                    <tr className="text-center">
                      <th />
                      <th scope="col">Recruiter Name</th>
                      <th scope="col">Number of ID</th>
                      <th scope="col">Yesterday's Final Score</th>
                      <th scope="col">Score added today</th>
                      <th scope="col">Updo Date Final Score</th>
                    </tr>
                  </thead>
                  <tbody className="text-center">
                    {this.props.data &&
                      this.props.data.length > 0 &&
                      this.props.data.map((item, key) => {
                        return (
                          <tr key={key}>
                            <td align="center">
                              <input type="checkbox" />
                            </td>
                            <td onClick={this.toggleJobs}>
                              {item.name}
                              <div>
                              {this.state.showAcc && <JobsTable />}
                              </div>

                            </td>
                            <td className="font-weight-bold">{item.noc}</td>
                            <td>{item.final}</td>
                            <td className="font-weight-bold">{item.today}</td>
                            <td className="font-weight-bold">{item.upto}</td>
                          </tr>
                        );
                      })}
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        );
      }
    }

在React JS中单击另一个TD单击以打开表格

3 个答案: