Question

使用下面的代码，取自this SO answer，用户可以通过点击并拖动在网格中垂直选择单元格。

我打算在React中使用此功能，因此需要将其转换为组件。

如何将基于方法链接和选择器的结构更改为React？

--HTML--

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
    <td data-row="1" data-col="1">a</td>
    <td data-row="1" data-col="2">b</td>
    <td data-row="1" data-col="3">c</td>
  </tr>
  <tr>
    <td data-row="2" data-col="1">d</td>
    <td data-row="2" data-col="2">e</td>
    <td data-row="2" data-col="3">f</td>
  </tr>
  <tr>
    <td data-row="3" data-col="1">g</td>
    <td data-row="3" data-col="2">h</td>
    <td data-row="3" data-col="3">i</td>
  </tr>
</table>

--CSS--

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#ccc;
  border:1px solid #fff;
}

table td.highlighted {
  background-color:#999;
}

--jQuery--

$(function () {
  var isMouseDown = false,
    isHighlighted;
 var currentCol;
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      currentCol = this.getAttribute("data-col");
      $(this).toggleClass("highlighted");
      isHighlighted = $(this).hasClass("highlighted");
      return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
          if(currentCol === this.getAttribute("data-col")){
              $(this).toggleClass("highlighted", isHighlighted);
          }
      }
    })
    .bind("selectstart", function () {
      return false;
    })

  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
});

Answer 1

您需要的只是React Event System docs。 onMouseDown ， onMouseUp 和 onMouseOver 它是您最有趣的事件处理程序。我创建了Similar Example。

在componentWillReceiveProps函数中，我检查单元格是否应该更新您自己的状态，如果不需要，我会使用shouldComponentUpdate来阻止渲染组件（当您使用它时非常重要）有很多细胞）。主状态位于Hello（父）组件中：overId包含实际的单元格数据，startedId包含起始单元格，enableSelect在我们开始选择时为true。

它＆＃34;类似＆＃34;因为我没有仔细检查你的例子，但我认为它足以向你展示它是如何运作的。

将jQuery单击/拖动代码转换为React

1 个答案: