将选中的表行存储在数组中

Question

我将数据映射到我的表，以便在我的reactJS应用程序中动态填充它。每行都有一个复选框。我想记录已检查和未检查的表行。我有一个存储所选行的数组。如何记录特定行的已检查和未检查事件。我知道我必须为每一行分配一个唯一的ID。但是我无法进行特定的行检查并取消选中被触发的事件。这就是我现在正在做的事情，但它并没有使用唯一的id概念

这是我的表

<table className="table table-hover table-condensed table-detailed"
                                       id="detailedTable" ref={node => this.table_el = node}>
      <thead>
          <tr>
              <th className="sorting_disabled wd-5p"></th>
              <th >Title</th>
              <th className="wd-15p">Channel</th>
              <th className="wd-10p">File Type</th>
              <th className="wd-15p">Uploaded</th>
              <th className="wd-20p">Process</th>
              <th className="wd-10p">Status</th>
         </tr>
     </thead>
     <tbody>
     {this.state.MediaFiles.map((item, i) => (
        <tr id={i}>
             <td className="v-align-middle">
                 <div className="checkbox">
                    <input type="checkbox" value="3" id={"checkbox1" + i}/>
                    <label htmlFor={"checkbox1" + i} onClick={() => this.handleCheckboxClick(item.url, item.poster.list_thumbnail)}/>
                 </div>
             </td>
             <td className="v-align-middle semi-bold">
                 <div className='file-image' style={{backgroundImage: `url('${item.poster.list_thumbnail}')`}}/>
                 <div className="movie-title">
                      <span className="movie-name"><a onClick={this.showVideo(item.url, item.file, item.id, item.title, item.duration, item.height, item.width, item.frame_rate)}>{item.title}</a>
                       </span><br/>
                       <span className="movie-info">Movie Trailer</span>
                  </div>
             </td>
             <td className="v-align-middle">Zee Movies</td>
             <td className="v-align-middle">AVI</td>
             <td className="v-align-middle">11-11-2016</td>
             <td className="v-align-middle">
                 <a href="#" className="btn">Compliance - India</a><br/>
                 <a href="#" className="btn">Objects</a>
                 <a href="#" className="btn">Faces</a>
             </td>
             <td className="v-align-middle text-success"> {this.jobStatus(item.job_status)}
             </td>
        </tr>
       ))
     }
    </tbody>
    </table>

这是我的handleCheckbocClick函数

handleCheckboxClick(file, image) {
        var that = this
        console.log('x');
        setTimeout(function () {
            if ($('.checkbox').find('input').is(":checked")) {
                console.log("checked")
                that.setState({
                    files_for_process: that.state.files_for_process.concat([file]),
                    selected_file_image: that.state.selected_file_image.concat([image])
                })
                console.log(that.state.selected_file_image)
                $('#hideatwill').removeClass('assign-wrap-hidden');
            } else {

                console.log('unchecked')
                $('#hideatwill').addClass('assign-wrap-hidden');
            }
        }, 5)
    }

但是此代码会查找是否选中了任何复选框。如果是，则在未取消选择行时存储该值。例如：检查6行，现在我取消选中6行中的任何一行，然后取消检查行的值也会存储在state.files_for_process数组中。