Сделайте первый столбец таблицы кликабельным и перейдите на другую страницу в reactjs - PullRequest
Новая
       61

Сделайте первый столбец таблицы кликабельным и перейдите на другую страницу в reactjs

0 голосов
/ 11 апреля 2020

Привет, я работаю над реакцией, и у меня есть одна проблема, в которой у меня есть одна динамически генерируемая таблица, и я хочу, чтобы первый столбец моей таблицы был кликабельным и переходил на другую страницу. Например: здесь, в приведенном ниже массиве, у меня есть 3 поля, в которых имя должно быть кликабельно, и при щелчке по этому полю он перейдет на другую страницу. 

tableData: [
    {id: "1", name: "name1", value: "1" },
    {id: "2", name: "name2", value: "2"}
]

В следующем методе getBody () принимает данные в качестве реквизита, в которых, когда я возвращаю строку , она возвращает указанный выше массив. Например: 

getBody = () => {
        return this.props.body.map((row, index) => {
            return (
                <tr key={index}>
                    {this.renderRowData(row)}
                </tr>
            )
        });
    }

 renderRowData = (row) => {
        return this.props.header.map(({ key, checked }, index) => {
            return (
                <td key={index}
                    className={(key === 'status' ? this.getStatusColor(row[key]) : '') ||
                        (key === 'rule_type' ? this.getRuleTypeColor(row[key]) : '')}>
                    <div className="item">
                        {
                            (checked)
                                ? <CheckBox
                                    checked={this.props.selectedValue && this.props.selectedValue.indexOf(row[key]) >= 0}
                                    clicked={() => this.props.onChecked(row[key])} />
                                : null
                        }

                        {
                            this.props.noPrecision === 'true' ?
                                <span className="checkbox-design">{roundOff(row[key], 0)}</span> :
                                <span className="checkbox-design">{roundOff(row[key], 2)}</span>

                        }
                    </div>
                </td>
            );
        });
    };

export const header = [
  {
    key: 'name',
    value: 'Name',
    checked: true,
  },

Итак, здесь я хочу вернуть строку таким образом, чтобы ее первая строка была интерактивной, и перейти на другую страницу.

Ответы [ 2 ]

1 голос
/ 11 апреля 2020

вы можете отобразить первый столбец таблицы как реагирующий маршрутизатор Link

Например 

    tableData: [
    {id: "1", name: "name1", value: "1" },
    {id: "2", name: "name2", value: "2"}
    ]

function Table() {
   return (
 <table>
        <thead><tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
        </thead>
        <tbody>
          {tableData.map(r => {
            <tr key={r.id} >
              <td>
                <Link to={name}>{name}</Link>
              </td>
              <td>
                {value}
              </td>
            </tr>
          })}
          </tbody>
      </table>
)

}

Для справки по использованию ссылки react-router вы можете обратиться this link

Вы можете сослаться на this sandbox 

 renderRowData = (row) => {
        return this.props.header.map(({ key, checked }, index) => {
        const rowEl = (
      <div className="item">
      {
          (checked)
              ? <CheckBox
                  checked={this.props.selectedValue && this.props.selectedValue.indexOf(row[key]) >= 0}
                  clicked={() => this.props.onChecked(row[key])} />
              : null
      }

      {
          this.props.noPrecision === 'true' ?
              <span className="checkbox-design">{roundOff(row[key], 0)}</span> :
              <span className="checkbox-design">{roundOff(row[key], 2)}</span>

      }
    </div>
    )
            return (
                <td key={index}
                    className={(key === 'status' ? this.getStatusColor(row[key]) : '') ||
                        (key === 'rule_type' ? this.getRuleTypeColor(row[key]) : '')}>
                   {key === 'name' ? <Link to={name}>{rowEl}</Link> : rowEl}
                </td>
            );
        });
    };
0 голосов
/ 11 апреля 2020

Вы можете использовать историю внутри дескриптора onClick: 

if (props.history) props.history.push('/otherpage');
...