Question

我是React和ES6语法的新手我有一个聊天小部件，我想切换显示和隐藏，因为我点击标题，我已经实现了一个onClick处理程序，但就我的逻辑而言无法在线找到类似的实现。这是我的代码：

import React, {Component} from 'react';
import chat from './styles.css';
import {connect} from 'react-redux';

class ChatWidget extends Component {

  handleClick(event) {
    console.log("Hide or unhide chat body")
  }

  render() {
    return (
      <div className={chat.container}>
        <div onClick={this.handleClick.bind(this)}
             className={chat.header}>
          <span className={chat.name}>Idol</span>
        </div>
        <div className={chat.body}>
          This is the Body of the chat
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.activeUser
  };
}

export default connect(mapStateToProps)(ChatWidget);

Answer 1

看起来像这样：

class ChatWidget extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showChat: true
    };
  }
  handleClick(event) {
    this.setState({
      showChat: !this.state.showChat
    });
  }

  render() {
    return (
      <div className={chat.container}>
        <div onClick={this.handleClick.bind(this)}
             className={chat.header}>
          <span className={chat.name}>Idol</span>
        </div>
        {this.state.showChat && 
         (<div className={chat.body}>
          This is the Body of the chat
         </div>)
        }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.activeUser
  };
}

export default connect(mapStateToProps)(ChatWidget);

但是条件渲染有不同的方法。请参阅此处的文档：https://facebook.github.io/react/docs/conditional-rendering.html

Answer 2

使用state变量来存储当前状态，是否显示正文。在该变量的基础上渲染图表的主体，称为conditional rendering。

检查一下：

class ChatWidget extends Component {

    constructor(){
        super();
        this.state={isShowBody: true} 
    }

    handleClick(event) {
        this.setState({isShowBody: !this.state.isShowBody})
    }

    render() {
        return (
            <div className={chat.container}>
                <div onClick={this.handleClick.bind(this)} className={chat.header}>
                  <span className={chat.name}>Idol</span>
                </div>
                {this.state.isShowBody ? 
                    <div className={chat.body}>
                        This is the Body of the chat
                    </div>
                : null}
            </div>
        );
    }
}

Answer 3

你可以做的是创建一个css类

.hidden {
  display: none;
}

并在<div class={chat.body}上动态切换该课程。

所以在div中添加一个id，这样就更容易抓取了。

<div class={chat.body} id='chat-body'>
  ...
</div>

在handleClick方法

中

handleClick(event) {
  let chat = document.getElementById("chat-body");

  chat-body.classList.toggle('hidden')
}

Answer 4

这里有一个例子，它对行有注释，因此你知道每行的作用。

考虑向组件添加hidden类不会卸载它，它只会将其从DOM中隐藏

import React, {Component} from 'react';
import chat from './styles.css';
import {connect} from 'react-redux';

class ChatWidget extends Component {
  // You need state to update the view
  state = {
    show: false
  }

  toggleBody() {
    // You can pass true or false to this function to show or hide the body
    this.setState({show: !this.state.show})
  }

  render() {
    {/* Take the show property from the state */}
    const {show} = this.state
    return (
      <div className={chat.container}>
        <div onClick={this.toggleBody.bind(this)} className={chat.header}>
          <span className={chat.name}>Idol</span>
        </div>
        {/* Add the class hidden to the body if show is false (you should create the hidden class in CSS) */}
        <div className={`${chat.body} ${show ? '' : 'hidden'}`}>
          This is the Body of the chat
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.activeUser
  };
}

export default connect(mapStateToProps)(ChatWidget);

ReactJS如何切换要隐藏或显示的元素

4 个答案: