ReactJS - Как я могу сопоставить свои данные в тегах td для перемещения при перемещении порядка тегов в моей таблице? - PullRequest
Новая
       13

ReactJS - Как я могу сопоставить свои данные в тегах td для перемещения при перемещении порядка тегов в моей таблице?

1 голос
/ 29 июня 2019

Я пытаюсь переместить коррелированные данные в моем компоненте CarTable.tsx для перемещения при изменении содержимого тега th. Поэтому, если я нажму на основную кнопку, чтобы переместить мои столбцы, я хочу, чтобы тэги td перемещались при перемещении тэгов. Таким образом, данные автомобиля Make перемещаются в правильный столбец с заголовком «Make», данные года автомобиля перемещаются в правильный столбец с заголовком «Year».

Надеюсь, это имеет смысл ...

Дайте мне знать, если понадобятся дальнейшие разъяснения.

App.tsx 

import React from 'react';
import './App.css';
import { Car } from './Models/Car';
import CarTable from './CarTable';
import * as Bootstrap from 'react-bootstrap';

class App extends React.Component<any, any> {

  constructor(props: any) {
    super(props);

    this.state = {
      cars: [],
      ordering: []
    }

    this.changeColumnOrder = this.changeColumnOrder.bind(this);
  }

  componentDidMount() {
    let order = [
      ["Model", "Make", "Year"], ["Model", "Year", "Make"], 
      ["Make", "Model", "Year"], ["Make", "Year", "Model"], 
      ["Year", "Model", "Make"], ["Year", "Make", "Model"]
    ];

    let random = Math.floor(Math.random() * 5); // 0 - 5

    var models: string[] = ["Accord", "Civic", "Pathfinder"];
    var make: string = "Honda";
    var years: number[] = [2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019];

    var cars: Car[] = [];

    for (let i = 0; i < 40; i++) {
      var randYear = Math.floor(Math.random() * 10); // 0 - 9
      var randModel = Math.floor(Math.random() * 3); // 0 - 2
      cars.push(new Car(models[randModel], make, years[randYear]));
    }

    this.setState({
      cars: cars,
      ordering: order[2]
    });
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1>Car Table</h1>
          <Bootstrap.Button onClick={this.changeColumnOrder} className="columnButton btn-danger">Change Column Order</Bootstrap.Button>
          <CarTable cars={this.state.cars} order={this.state.ordering}></CarTable>
        </header>
      </div>
    );
  }

  // Method for changing the column order of the contents in the car table. 
  changeColumnOrder() {

    let order = [
      ["Model", "Make", "Year"], ["Model", "Year", "Make"], 
      ["Make", "Model", "Year"], ["Make", "Year", "Model"], 
      ["Year", "Model", "Make"], ["Year", "Make", "Model"]
    ];

    let random = Math.floor(Math.random() * 5); // 0 - 5

    console.log("Testing random order");
    console.log(order[random]);

    this.setState({
      ordering: order[random]
    });

    console.log("Testing after set state.");
    console.log(order[random]);
  }
}

export default App;

CarTable.tsx 

import React from 'react';
import './App.css';
import { Car } from './Models/Car';

export default class CarTable extends React.Component<any, any> {
    render() {
        return(
            <table id="carsTable">
                <thead>
                    <tr>
                    {this.props.order.map((column: string, key: any) => {
                        return(<th key={column}>{column}</th>)
                    })}
                    </tr>
                </thead>
                <tbody>
                    {this.props.cars.map((car: Car, key: any) => {
                        return(
                            <tr key={key}>
                                <td key={car.Make}>{car.Make}</td>
                                <td key={car.Model}>{car.Model}</td>
                                <td key={car.Year}>{car.Year}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        )
    }
}

1 Ответ

0 голосов
/ 30 июня 2019

Не переупорядочено, так как td и th никак не связаны друг с другом. Ваши CarTable компоненты заказывают th s правильно, требуется только небольшое изменение в tbody: не используйте car.X напрямую, но следуйте полям order, например: 

{this.props.cars.map((car: Car, key: any) =>
    <tr key={key}>
        {this.props.order.map((column: string, key: any) =>
            <td key={column}>
                {car[column]}
            </td>
        )}
    </tr>
)}

Теперь каждая строка отображает свои ячейки на основе заданного order.

...