React功能组件中的onScroll

如何解决React功能组件中的onScroll

我不知道为什么onScroll无法启动console.log。 <table className="table" onScroll={()=>{console.log("Works")}> 只是不触发console.log ...

解决方法

该代码将起作用。您的表需要滚动。如果没有滚动条，则不会触发任何滚动事件。您的表需要可滚动，并且我知道默认情况下表通常不会拉伸，一旦内容太长，它们就会变为可滚动的。但是您可以使用CSS设置滚动条。这只是有关如何使其工作的示例。

function App()
{

  return (
    <table className="table" onScroll={()=>alert("Table Scrolled")}>
      <tr>
        <td>First Row</td>
      </tr>
      <tr>
        <td>Second Row</td>
      </tr>
      <tr>
        <td>Second Row</td>
      </tr>
    </table>
  );
}

ReactDOM.render(<App />,document.getElementById("root"));

.table{
  overflow: scroll;
  height: 300px;
  background-color: yellow;
  display: block;
}


.table tr{
  width: 200px;
  height: 200px;
  background-color: grey;
  border: thin solid blue;
  margin: 1rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

,

如果您的元素不是“表格”，则该事件将不会发生，但是，如果该事件是可滚动的，请尝试将此样式添加到元素overflow: scroll