Reactjs 如何使用onClick针对特定的div？

我正在构建一个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>

类应用程序扩展了React.Component{
state={moviesNow:[]、tvSeries:[]、actionMovies:[]、animation:[]}；
containerSection=React.createRef（）；
handleClick=e=>{
this.containerSection.current.style.transform=`translateX（-100%）`；
};
render（）{
返回(
现在玩
电视剧

对于两个不同的元素，您只使用了一个

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>

类应用程序扩展了React.Component{
state={moviesNow:[]、tvSeries:[]、actionMovies:[]、animation:[]}；
containerSection=React.createRef（）；
//新裁判
secondContainerSection=React.createRef（）；
handleClick=ref=>e=>{
ref.current.style.transform=`translateX（-100%）`；
};
render（）{
返回(
现在玩
电视剧

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

抽屉组件

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>

类抽屉扩展React.Component{
containerSection=new React.createRef（）；
handleClick=e=>{
this.containerSection.current.style.transform=`translateX（-100%）`；
};
render（）{
返回(
{this.props.children}

主要成分

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>);

类应用程序扩展了React.Component{
state={moviesNow:[]、tvSeries:[]、actionMovies:[]、animation:[]}；
containerSection=React.createRef（）；
handleClick=e=>{
this.containerSection.current.style.transform=`translateX（-100%）`；
};
render（）{
返回(
现在玩
电视剧
);
非常感谢！像这样编写函数有什么不同吗？handleClick=（ref，e）=>{ref.current.style.transform=
translateX（-100%）
；}；