Question

我正在学习Meteor和React的应用程序开发，并遇到了障碍。我希望用户能够单击一个元素并更改另一个元素的类。如果我创建一个没有Meteor或React的网站，我会使用这样的jQuery函数：

$("#button").click(function(){
  $("#target").removeClass("hidden");
});

我似乎无法弄清楚如何在我的React应用程序中使用jQuery（但将代码复制到chrome web控制台工作）所以我开始使用google搜索并发现不建议使用jQuery或直接操作在使用React的同时使用DOM。我不太了解React的虚拟DOM如何在这个阶段工作。

所以我的问题是：复制这个jQuery代码在React应用程序中的作用的正确方法是什么？

Answer 1

我建议您将类名（link）和状态组合起来，这样就可以这样做：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({ clicked: true });
  }
  render() {
    return (
      <div className={classNames('foo', { hidden : this.state.clicked })}>
        <button onClick={this.handleClick} >BUTTON</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('example')
);

如果状态clicked为false，则类hidden在特定元素上无效。

Meteor和React：在点击时操纵元素的正确方法？

1 个答案: