React-jQuery-addonclick侦听器加载文档

我需要在文档加载时添加onClick侦听器。我不想用state来做，因为有几个原因。首先，我想创建一个规则，我可以在任何地方使用，并始终显示下一个元素。其次，我还想添加淡入淡出或滑动效果。下面的代码不起作用

componentDidMount() {
  $(document).ready(function() {
    $(".showNext").click(function() {
      $(this).next().slideToggle();
    });
  });
}

if (!loadingData)
  render() {
    return(
      <div>

        <div className="showNext">Show element #1</div>
        <div style={{display:"none"}}>Element #1</div>

        <div className="showNext">Show element #2</div>
        <div style={{display:"none"}}>Element #2</div>

      </div>
    );
  }
} else {
  <div>Loading ... </div>
}

componentDidMount（）{
$（文档）.ready（函数（）{
$（“.showNext”）。单击（函数（）{
$（this.next（）.slideToggle（）；
});
});
}
如果（！加载数据）
render（）{
返回(
显示元素#1
元素#1
显示元素#2
要素#2
);
}
}否则{
加载。。。
}

如果您已经在使用

componentDidMount

方法，似乎您不关心创建任何函数，请使用以下内容更新代码：

handleClickMethod = () => console.log('clicked')
render() {
  return(
    <div>

      <div className="showNext">Show element #1</div>
      <div style={{display:"none"}} onClick={this.handleClickMethod}>Element #1</div>

      <div className="showNext">Show element #2</div>
      <div style={{display:"none"}} onClick={this.handleClickMethod}>Element #2</div>

    </div>
  );
}

handleClickMethod=（）=>console.log（'clicked'）
render（）{
返回(
显示元素#1
元素#1
显示元素#2
要素#2
);
}

甚至更好！创建一个可点击的组件

class Clickable extends Component {
  _handleClick = () => {
    console.log('clicked')
    this.props.onClick && this.props.onClick()
  }

  render() {
    const {...props} = this.props
    return <div {...props} onClick={this._handleClick}/>
  }
}

类可单击扩展组件{
_handleClick=（）=>{
console.log（'clicked'）
this.props.onClick&&this.props.onClick（）
}
render（）{
const{…props}=this.props
返回
}
}

在您的主要组件中使用它：

render() {
  return(
    <div>

      <Clickable className="showNext">Show element #1</Clickable>
      <div style={{display:"none"}}>Element #1</div>

      <Clickable className="showNext">Show element #2</Clickable>
      <div style={{display:"none"}}>Element #2</div>

    </div>
  );
}

render() {
  return(
    <div>

      <Toggleable showText={'Show element #1'} text={'Element #1'}/>
      <Toggleable showText={'Show element #2'} text={'Element #2'}/>

    </div>
  );
}

render（）{
返回(
显示元素#1
元素#1
显示元素#2
要素#2
);
}

不管怎么说，对于你想要完成的事情，你最好能做得更好：

class Toggleable extends Component {
  state = {toggled: false}

  _toggleDiv = () => {
    this.setState({toggled: !this.state.toggled})
  }

  render() {
    return (
      <div>
        <div className="showNext" onClick={this._toggleDiv}>{this.props.showText}</div>
        {this.state.toggled && <div>{this.props.text}</div>}
      </div>
    )
  }
}

类Togleable扩展组件{
状态={toggled:false}
_toggleDiv=（）=>{
this.setState（{toggled:！this.state.toggled}）
}
render（）{
返回(
{this.props.showText}
{this.state.toggled&&{this.props.text}
)
}
}

在您的主要组件中使用它：

render() {
  return(
    <div>

      <Clickable className="showNext">Show element #1</Clickable>
      <div style={{display:"none"}}>Element #1</div>

      <Clickable className="showNext">Show element #2</Clickable>
      <div style={{display:"none"}}>Element #2</div>

    </div>
  );
}

render() {
  return(
    <div>

      <Toggleable showText={'Show element #1'} text={'Element #1'}/>
      <Toggleable showText={'Show element #2'} text={'Element #2'}/>

    </div>
  );
}

render（）{
返回(
);
}

---

欢迎使用模块化编程

一般来说，开发人员认为在React应用程序中使用jQuery可能不是一个好主意，但有时开发人员确实希望使用一些jQuery魔法，如衰减、滑动等。我个人发现React与ReactDOM配合使用时效果最好，使用REF和jQuery定位ID和类肯定不是最好的选择，但是

回到我的问题上来，它对我不起作用，因为我先用withTracker（Meteor/React）加载一些数据，所以我用加载我的类没有的gif来呈现dom。然后，一旦加载了数据，我就用componentDidMount方法中的jQuery所针对的类呈现主要内容

---

如果目标类第一次呈现，我的初始代码就可以工作。我在最初的问题中更新了代码，所以没有混淆。

不应该

是

吗？不，在React中，您在

类

属性上使用

类名

，因为在React中这是一个保留字（

类

）。它对我有效：但是。。。仅用于第一次渲染。之后，指向DOM节点的引用被破坏。您还需要在每个

组件diddupdate

中附加这些jQuery处理程序。这是一个非常糟糕的主意，应该使用React事件处理程序，而不是jQuery来完成。感谢您的详细回答。在您的示例中，

text={“可能会因为“}后面的大量逻辑而变得复杂，此外，没有办法添加像

.slideToggle（）

或

.fadeToggle（）

这样的效果来提供更好的可视化效果。这是我的主要观点，也是引用jQuery而不使用React状态的原因。但是您的代码可能遵循better React的实践。

text

也可以是JSX元素，或者您只需在类函数中解析文本（如果是字符串），另外，对于幻灯片和淡入淡出等动画，只需使用纯CSS，您还可以获得动画的详细指南。