如何编写在ReactJS中隐藏容器的点击事件?

时间:2019-01-15 10:59:19

标签: jquery reactjs

“。b2”是按钮的类名。 “ #subscribe”是div空白容器的ID。 jQuery在单击按钮时隐藏了div容器。如何将其转换为reactjs?

$(".b2").click(function(){
      $("#subscribe").hide();
    });

3 个答案:

答案 0 :(得分:1)

在ReactJS中,您需要三件事:

1)状态为布尔型的有状态组件,已初始化为true。此布尔值将用于显示/隐藏容器。

2)一个将布尔值的状态更新为false的函数。

3)一种渲染方法,用于根据布尔状态和触发函数的按钮来渲染容器。

一起,您将需要这样的东西:

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
       showContainer: true
    }
  }

  hideContainer() {
    this.setState({ showContainer: false });
  }

  render() {
    return (
       <div>
          {this.state.showContainer && <div>MyContainer</div>}
          <button onClick={() => this.hideContainer()}>Hide container</button>
      </div>
    )
  }
}

Working JSFiddle

答案 1 :(得分:1)

ReactJS是基于状态和组件的,您可以使用状态来控制视图中的UI。

要详细了解状态如何运行,请查看ReactJS docs(特别是“状态和生命周期”部分)

但是您可以通过以下方法实现上述目标:(未经测试的代码)

state = { visible: false }

<Button onClick={this.setState=({visible: !this.state.visible})}>Toggle me!</Button>

<Component visible={this.state.visible} />

以上内容将切换该组件的可见性。请注意,visibility道具被传递到<Component>中。您可以使用props在组件内部访问它。

props文档中的更多信息。

答案 2 :(得分:0)

使用状态来设置元素的样式。

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor() {
    super();
    this.state = {
      show: false
    };
  }

  render() {

    const { show } = this.state

    return (
      <div>
        <p style={{ display: show ? "" : "none"}}>
          Start editing to see some magic happen :)
        </p>

        <button onClick={() => this.setState({show: !show})}>
          {show ? 'Hide' : 'Show'}
        </button>

      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

此处为实时示例https://stackblitz.com/fork/react