Question

我正在尝试使用ReactJS中的拖放机制在我的网站中实现媒体galery。当用户删除图像时，我将其保存在数组上，然后迭代数组并动态显示图像。所以我想用引导程序将图像分成列和行，所以我希望每行有3列，但我的问题是我不能动态追加行并将图像绑定在那里（例如当我有4个图像时，我希望3个顶部显示在一行中，最后一个图像显示在新图像中）。对此有何解决方案？这是我的代码示例：

   <?php 
        $sql = "SELECT * FROM userItems WHERE item_category = $choice" ;                
        $result = $db->query($sql);
        $row = $result->fetchAll(PDO::FETCH_ASSOC);
        foreach($row as $item):
            echo '<tbody style="width:100%;height:100%;">';
            echo '<tr>';
            echo      '  <td  id="'.$item['item_name'].'" onclick="copyItem(id)" style="margin:-1px;width:261px;"> '.$item['item_name'] .'</td>';
            echo '</tr>';
            echo '</tbody>';

        endforeach;
   ?>

<script>
function copyItem(id) 
{
    var table = document.getElementById("cart");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var value = document.getElementById(id).innerHTML;

    var values = document.createElement("input").type="text".name="items[]".value=values;
    // var sent = '<span><input type="text" name="items[]" value="" size="15" /></span>\r\n';
    var dummy = '<span><input type="text" name="unitprice[]" size="30"/></span>\r\n';
    var dummy1 = '<span><input type="number" name="qty[]" size="15"/></span>\r\n';
    var dummy2  = '<span><input type="text" name="totalamount[]" size="15"/></span>\r\n';
    var dummy3 = '<span><button class="btn btn-danger active" type="button" style="height:25px;width:68px;padding:2px;" onclick = "deleteRow(this)" >Delete </button></span>\r\n';
    cell1.innerHTML = values;
    cell2.innerHTML = dummy;
    cell3.innerHTML = dummy1;
    cell4.innerHTML = dummy2;
    cell5.innerHTML = dummy3;
}

</script>

以上是一个组件，然后我在

下面调用并渲染它

<div className="media-gallery">
                    {
                        this.state.files.map((file) => {
                            return (
                                <div key={file.name}>
                                    <div className="col-sm-4">
                                        <figure className= "gallery-thumb">
                                            <img src={file.preview} alt="thumb" className="ro-imgPreview" />
                                            <span className="icon icon-delete"><i className="fa fa-trash"></i></span>
                                        </figure>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

Answer 1

您可以尝试在单独的函数中组合行和列，并在媒体库div的渲染函数中调用它：

render(){
  const gallery = this.galleryGrid();
  return (
    <div className="media-gallery container">
      { gallery }
    </div>);
}

和galleryGrid函数：

galleryGrid () {
  const rows = [];
  // Generate the columns for thumbnails
  const thumbs = this.state.files.map((file) => {
      return (
          <div key={file.name} className="col-sm-4">
              <figure className= "gallery-thumb">
                  <img src={file.preview} alt="thumb" className="ro-imgPreview" />
                  <span className="icon icon-delete"><i className="fa fa-trash"></i></span>
              </figure>
          </div>
      )
  });
  // Push a new row for every set of three thumbnails
  for(let row = 0; row < Math.ceil(this.state.files.length / 3); row += 1){
    rows.push(<div key={ `row-${row}` } className="row">
      {
        thumbs.slice(row * 3, 3);
      }
    </div>); 
  };
  // give back an array of our rows composed of columns
  return rows;
}

这将围绕每组3列div包裹一个'row'div。

ReactJS将动态列附加到图库中的行

1 个答案: