Открой таблицу по клику другого тд в реакции js

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

Используйте 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 2

Вот полный код.

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>
        );
      }
    }

Answer 3

Я думаю, что самый простой способ будет следующим:

Измените ячейку имени вашего предмета, чтобы добавить взаимодействие:

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

Функция:

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

Не забудьте установить начальное значение jobsTableVisible как false в состоянии компонента tableone. Добавьте конструктор к компоненту и установите начальное состояние

this.state = {
    jobsTableVisible: false
}

Затем в компоненте JobsTable перед возвратом добавьте проверку:

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

И обновите эту часть:

<div className="table-responsive">

к этому:

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

Не забудьте передать свойство jobsTableVisible в JobsTable, и все готово.