Question

每个div都有一个按钮。当我按下它时，它必须用相同的键显示div，并隐藏其他键。最好的方法是什么？这是我的代码

class Main extends Component {
    constructor(props) {
      super(props);
      this.state = {
        messages: [
          { message: "message1", key: "1" },
          { message: "message2", key: "2" }
          ]
      };
    }
    handleClick(message) {
     //something to show the specific component and hide the others
    }
    render() {
      let messageNodes = this.state.messages.map(message => {
        return (
        <Button key={message.key} onClick={e => this.handleClick(message)}>
         {message.message}
        </Button>
        )
     });
     let messageNodes2 = this.state.messages.map(message => {
        return <div  key={message.key}>
           <p>{message.message}</p>
           </div>
     });
     return <div>
         <div>{messageNodes}</div>
         <div>{messageNodes2}</div>
            </div>
    }
}

Answer 1

像这样的东西。您应该保持仅有状态的可见组件的消息键，并且在render方法中，您应该仅根据状态保留的键呈现可见组件。由于您具有状态的消息对象数组，因此使用它来仅呈现与该键匹配的按钮。

class Main extends Component {
    constructor(props) {
       super(props);
       this.state = {
          //My array messages: [],
          visibleComponentKey: '',
          showAll: true
       };
       handleClick(message) {
          //something to show the specific component and hide the others
          // preserve in state visible component
          this.setState({visibleComponentKey : message.key, showAll: false});
      };
      render() {
        const {visibleComponentKey, showAll} = this.state;
        return (
          <div>
            {!! visibleComponentKey && ! showAll &&
               this.state.messages.filter(message => {
                    return message.key == visibleComponentKey ? <Button onClick={e => this.handleClick(message)}>{message.message}</Button>
        ) : <div /> })
            }
            { !! showAll &&
               this.state.messages.map(message => <Button key={message.key} onClick={e => this.handleClick(message)}>{message.message}</Button>)
            }
        </div>        
         );
}

}

我还没有尝试过，但它给了你一个基本的想法。

Answer 2

import React from "react";
import { render } from "react-dom";

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      messages: [
        { message: "message1", id: "1" },
        { message: "message2", id: "2" }
      ],
      openedMessage: false
    };
  }
  handleClick(id) {
    const currentmessage = this.state.messages.filter(item => item.id === id);
    this.setState({ openedMessage: currentmessage });
  }
  render() {
    let messageNodes = this.state.messages.map(message => {
      return (
        <button key={message.id} onClick={e => this.handleClick(message.id)}>
          {message.message}
        </button>
      );
    });
    let messageNodes2 = this.state.messages.map(message => {
      return (
        <div key={message.key}>
          <p>{message.message}</p>
        </div>
      );
    });
    const { openedMessage } = this.state;
    console.log(openedMessage);
    return (
      <div>
        {openedMessage ? (
          <div>
            {openedMessage.map(item => (
              <div>
                {" "}
                {item.id} {item.message}{" "}
              </div>
            ))}
          </div>
        ) : (
          <div> Not Opened</div>
        )}
        {!openedMessage && messageNodes}
      </div>
    );
  }
}

render(<Main />, document.getElementById("root"));

这里的主要概念是以下代码行。

  handleClick(id) {
    const currentmessage = this.state.messages.filter(item => item.id === id);
    this.setState({ openedMessage: currentmessage });
  }`

当我们映射messageNodes时，我们会传递消息ID。单击消息时，该消息的id将传递给handleClick，并且我们会过滤所有不包含所单击消息的id的消息。然后，如果状态为openedMessage，我们呈现消息，但同时我们停止呈现消息节点，使用此逻辑{!openedMessage && messageNodes}

Answer 3

我无法直接回复@Omar，但请告诉我，这是我所寻找的最佳代码说明！谢谢！另外，要关闭，我添加了handleClose函数，将状态设置为false。像魅力一样工作！

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="radar-chart" width="1200" height="550"></canvas>

从循环中显示和隐藏React中的特定组件

3 个答案: