單擊反應js中的另一個td打開一個表

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 ，現在點擊這個，我試圖打開一個新表類型的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該組件。 我曾嘗試使用一個反應型手風琴庫，但我認為，使用圖書館這不是一個好主意。 所以，任何人都可以幫助我嗎？ 謝謝。

Answer 1

我認為最簡單的方法如下：

更改項目名稱單元格以添加交互：

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

功能：

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

不要忘記在tableone組件的狀態中將jobsTableVisible的初始值設置為false。 將構造函數添加到組件並將初始狀態設置為該狀態

this.state = {
    jobsTableVisible: false
}

然后在返回之前在JobsTable組件中添加一個檢查：

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

並更新此部分：

<div className="table-responsive">

對此：

<div className={"table-responsive"+visibleClass}>

不要忘記將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>
        );
      }
    }