如何使用 onClick 定位特定的 div？答案

【问题标题】：How can I target a specific div with onClick?如何使用 onClick 定位特定的 div？
【发布时间】：2023-03-25 12:38:01
【问题描述】：

我正在构建一个 NetFlix 克隆主页。我已经有电影列表，电视剧 ecc.. 水平渲染。

我想单击下一个箭头并仅滑动相关部分。现在，如果我单击第一部分上的下一个箭头，上面的第二个箭头会滚动，我不想要那个..

我怎样才能实现它？

我尝试用谷歌搜索它和一些教程，但我找不到如何使用 onClick 定位同一父级中的元素。

非常感谢

class App extends React.Component {
  state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };

  containerSection = React.createRef();

  handleClick = e => {
    this.containerSection.current.style.transform = `translateX(-100%)`;
  };

  render() {
    return (
      <div className="container">

        <h1 className="section-title">Now playing</h1>
        <div className="wrapper">
          <div className="nextArrow" onClick={this.handleClick}>
            <img src={nextArrow} alt="" />
          </div>
          <div ref={this.containerSection} className="container-section">
            <MovieItem movies={this.state.moviesNow} />
          </div>
        </div>

        <h1 className="section-title">TV Series</h1>
        <div className="wrapper">
          <div className="nextArrow" onClick={this.handleClick}>
            <img src={nextArrow} alt="" />
          </div>
          <div ref={this.containerSection} className="container-section">
            <MovieItem movies={this.state.tvSeries} />
          </div>
        </div>

【问题讨论】：

标签： reactjs

【解决方案1】：

您只对两个不同的元素使用了一个ref，我想这就是您发出问题的地方。所以我更新了handleClick 以便能够接收ref 作为参数并返回一个将接收事件的函数：

  handleClick = ref => e => {
    ref.current.style.transform = `translateX(-100%)`;
  };

那么你可以这样使用handleClick：

   <div className="nextArrow" onClick={this.handleClick(secondContainerSection)}>
     <img src={nextArrow} alt="" />
   </div>

最终它会给你这样的东西：

class App extends React.Component {
  state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };

  containerSection = React.createRef();
  //a new ref
  secondContainerSection = React.createRef();

  handleClick = ref => e => {
    ref.current.style.transform = `translateX(-100%)`;
  };

  render() {
    return (
      <div className="container">

        <h1 className="section-title">Now playing</h1>
        <div className="wrapper">
          <div className="nextArrow" onClick={this.handleClick(containerSection)}>
            <img src={nextArrow} alt="" />
          </div>
          <div ref={this.containerSection} className="container-section">
            <MovieItem movies={this.state.moviesNow} />
          </div>
        </div>

        <h1 className="section-title">TV Series</h1>
        <div className="wrapper">
          <div className="nextArrow" onClick={this.handleClick(secondContainerSection)}>
            <img src={nextArrow} alt="" />
          </div>
          <div ref={this.secondContainerSection} className="container-section">
            <MovieItem movies={this.state.tvSeries} />
          </div>
        </div>

【讨论】：

非常感谢！这样写函数有什么区别吗？ handleClick = (ref , e) => { ref.current.style.transform = translateX(-100%); };

【解决方案2】：

为抽屉制作一个单独的组件并在其中定义参考

抽屉组件

class Drawer extends React.Component {
  containerSection =new React.createRef();
  handleClick = e => {
    this.containerSection.current.style.transform = `translateX(-100%)`;
  };
  render() {
    return (
        <div className="wrapper">
          <div className="nextArrow" onClick={this.handleClick}>
            <img src={nextArrow} alt="" />
          </div>
          <div ref={this.containerSection} className="container-section">
          {this.props.children}
          </div>
        </div>

主要组件

class App extends React.Component {
  state = { moviesNow: [], tvSeries: [], actionMovies: [], animation: [] };
  containerSection = React.createRef();
  handleClick = e => {
    this.containerSection.current.style.transform = `translateX(-100%)`;
  };
  render() {
    return (
      <div className="container">
        <h1 className="section-title">Now playing</h1>
    <Drawer><MovieItem movies={this.state.moviesNow} /></Drawer>

        <h1 className="section-title">TV Series</h1>
    <Drawer><MovieItem movies={this.state.tvSeries} /></Drawer>
        </div>);

【讨论】：