如何通过单击按钮来显示特定div id中的数据数组？

Question

我创建了react的一个组件。这里有一个带有一些值的数组。因此，我需要通过单击按钮来显示任何特定div中值或数据。

这是我在组件中的数组。

    constructor(){
        super()
        this.state = {
            notificaion: [
                "Notification-1",
                "Notification-3",
                "Notification-4",
                "Notification-5",
            ]
        } 
    }

这是我的带有单击事件的按钮。

<button onClick={this.getNotification}>{this.state.notificaion.length}</button>

这是我创建的函数。并推送特定div中的数据。

    getNotification = () =>{ 
           return(
            this.state.notificaion.map(items =>(
                <li key={items}>{items}</li>
            ))
        ) 
    }

在这里，我想在单击按钮时显示

<strong>{this.getNotification()}</strong>

这是我尝试过的完整代码。

import React, {Component} from 'react'; 



class Menu2 extends Component{

    constructor(){
        super()
        this.state = {
            notificaion: [
                "Notification-1",
                "Notification-3",
                "Notification-4",
                "Notification-5",
            ]
        } 
    }

    getNotification = () =>{ 
           return(
            this.state.notificaion.map(items =>(
                <li key={items}>{items}</li>
            ))
        ) 
    }

    render(){

        return(
            <div className="header">
                <div className="container">
                <div className="row">
                        <div className="col-lg-12 col-sm-12 col-xs-12">
                            <div className="text-center mb-20">
                                <h1>Notificaion Status</h1>
                                <p>Check notificatin read/unread</p>
                            </div>
                        </div>
                    </div> 
                    <div className="row">
                        <div className="col-lg-12 col-sm-12 col-xs-12">
                            <div className="card border-dark mb-3"> 
                                <div className="card-body text-dark"> 
                                    <p className="card-text" style={{textAlign: 'center'}}>

                                        {this.state.notificaion.length > 0 
                                         ?
                                        <span>You Have <button onClick={this.getNotification}>{this.state.notificaion.length}</button> Unread Notifications</span>
                                         : 
                                        <span>You Have <button onClick={this.getNotification}>{this.state.notificaion.length}</button> Unread Notifications}</span>} 

                                    </p> 
                                    <strong>{this.getNotification()}</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        );
    }
}

export default Menu2;

Answer 1

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      notificaion: [
        "Notification-1",
        "Notification-3",
        "Notification-4",
        "Notification-5",
      ],
      notificationHtml: ""
    }
  }
  getNotification = () => {
    this.setState({
      notificationHtml: this.state.notificaion.map(items => (
        <li key={items}>{items}</li>
      ))
    });
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.getNotification}>{this.state.notificaion.length}</button>
        <div>
          {this.state.notificationHtml}
        </div>
      </div>
    );
  }
}
export default App;

Answer 2

我会这样实现：

this.state = {
  visible: false,
  notifications: ...
}

toggleVisibility() =>{
  this.setState({
    visibile: true
  })
}

别忘了绑定"toggleVisibility“函数。然后在您的组件中：

<button onClick={this.toggleVisibility}/>
...
{if(this.state.visible){
  <strong>this.state.notifications.map(notification,i) =>
    <li key={i}>{notification}</li>
  </strong>
}

Answer 3

您可以在状态中添加属性showNotification。根据它的值，我们可以显示通知。

还要添加一个切换showNotification值的方法showNotificationHandler。

class Menu2 extends Component {
  constructor() {
    super();
    this.state = {
      notificaion: [
        "Notification-1",
        "Notification-3",
        "Notification-4",
        "Notification-5"
      ],
      // adding a property "showNotification"
      showNotification: false
    };
  }

  getNotification = () => {
    return this.state.notificaion.map(items => <li key={items}>{items}</li>);
  };

  // method that toggles the "showNotification" value
  showNotificationHandler = () => {
    this.setState(({ showNotification }) => ({
      showNotification: !showNotification
    }));
  };

  render() {
    return (
      <div className="header">
        <div className="container">
          <div className="row">
            <div className="col-lg-12 col-sm-12 col-xs-12">
              <div className="text-center mb-20">
                <h1>Notificaion Status</h1>
                <p>Check notificatin read/unread</p>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-lg-12 col-sm-12 col-xs-12">
              <div className="card border-dark mb-3">
                <div className="card-body text-dark">
                  <p className="card-text" style={{ textAlign: "center" }}>
                    {this.state.notificaion.length > 0 ? (
                      <span>
                        You Have{" "}
                        <button onClick={this.showNotificationHandler}>
                          {this.state.notificaion.length}
                        </button>{" "}
                        Unread Notifications
                      </span>
                    ) : (
                      <span>
                        You Have{" "}
                        <button onClick={this.showNotificationHandler}>
                          {this.state.notificaion.length}
                        </button>{" "}
                        Unread Notifications}
                      </span>
                    )}
                  </p>
                  <strong>
                    // Depending on the value of "showNotification" we get notification 
                    // if "showNotification" is true then get the notification
                    {this.state.showNotification && this.getNotification()}
                  </strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Menu2;