0

所以基本上我正在使用一个大型数据集，它为您提供今年（2018 年，因此数据是从 2018 年 1 月 1 日到 2018 年 2 月 18 日）每天的视频列表（大约 100-200 个）。我想做的是使用一张表格来显示一天内的所有视频。我正在使用<option>标签作为所有日期的列表。我目前被卡住了，因为我试图让它在您单击某个日期的位置，一个表格将生成并显示当天的视频列表，其中包含视频名称和发布视频的频道。这是我的代码的副本：

下面的代码是生成表格中的每一行：

// Simple TableRow component for showing a <tr>

class TableRow extends Component {
  render() {
    return (
      <tr>
        <td>
          { this.props.date }
        </td>
        <td>
          { this.props.title }
        </td>
        <td>
          { this.props.channel }
        </td>
        <td>
          { this.props.view }
        </td>
        <td>
          <img src={ this.props.photo }></img>
        </td>
      </tr>
    )
  }
}

下面的代码是生成整个表并调用TableRow

// Class for a table

class Table extends Component {
  constructor(props) {
    super(props);
  }
  // Should return a TableRow component for each element in this.props.data
  render() {
    return (
      <div>
        <table className="table">
          <tbody>
            <tr>
              <th>Date</th>
              <th>Video Name</th>
              <th>Channel</th>
              <th>Views</th>
              <th>Photo</th>
            </tr>
            { this.props.songs.map(function(d, i) {
              return <TableRow key={ 'song-' + i } date={ d.trending_date } title={ d.title } channel={ d.channel_title } view={d.views} photo={ d.thumbnail_link } />
          }) }
          </tbody>
        </table>
      </div>
    )
  }
}

最后，这是我做大部分工作的地方。此功能正在生成选项并根据特定日期创建表格。this.props.data是从不同类传递到Options类的数据集

class Options extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '18.01.01',
      data: [],
    };

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

  handleChange(event) {
    this.setState({
      value: event.target.value,
    });
  }

  render() {
    // Gets the trending dates but ignores duplicates
    let dateData = d3.nest()
      .key((d) => { return d.trending_date })
      .entries(this.props.data);

    return (
      <div>
          Choose a Date:
          <select value={this.state.value} onChange={this.handleChange}>
            { dateData.map((d) => {
              return <option value={d.key}>{d.key}</option>
            }) }
          </select>

          <Table songs={this.state.data} />
      </div>
    );
  }
}

我正在尝试使用this.state.valueVALUE 来获取对象中的 VALUE dateData，因为dateData它包含每个日期的所有视频。但是，我似乎无法找到一种方法来设置this.state.data正确的数据集以传递给Table班级......有人知道如何解决这个问题吗？

数据集外观示例：https ://i.imgur.com/S5JIkbx.png

4

0 回答 0