Question

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

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

Answer 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

Answer 2

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文档中的更多信息。

Answer 3

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

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

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

3 个答案: