javascript - meteor 和 react : Correct way to manipulate elements on click?

Question

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

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

我似乎无法弄清楚如何在我的 React 应用程序中使用 jQuery(但将代码复制到 chrome web 控制台可以工作)所以我开始谷歌搜索，发现不建议使用 jQuery 或直接操作使用 React 时完全没有 DOM。目前我不太了解 React 的虚拟 DOM 是如何工作的。

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

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 类在特定元素上未激活。