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

我会这样实现：

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 2

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

还添加一种方法showNotificationHandler来切换showNotification的值。

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;

Answer 3

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;

单击按钮如何显示特定div ID中的数据数组？

3 个答案: