Reactjs 显示/隐藏较大集合中的两个 div 之一答案

【问题标题】：Reactjs show/hide one of two divs within larger setReactjs 显示/隐藏较大集合中的两个 div 之一
【发布时间】：2019-03-01 13:20:49
【问题描述】：

我希望在 Reactjs 项目中的较大集合中的两个 div 之一之间切换。总共有四对div，每对由一个'name' div和一个'summary' div组成。目标是在单击时从名称（默认可见）切换到摘要（默认隐藏），如果再次单击则切换回来。

下面的代码似乎可以完成，但是如果单击一个，它们都会改变（一次只能一个）。我认为这是因为共享状态，但我不知道如何捕获和处理单击的内容，因此它只能更改相应的 div。为了空间，我将四对中的两对放入 sn-p。

谢谢！

class App extends Component {
  constructor() {
    super();
    this.state = {
      shown: true,
    };
  }
  toggle() {
    this.setState({
      shown: !this.state.shown
    });
  }

  render() {
    var shown = {
      display: this.state.shown ? "block" : "none"
    };
    var hidden = {
      display: this.state.shown ? "none" : "block"
    }

return (
<div className="App">
      
  <div className="row">

    <div className="mod-sum-container-s ml-auto" style={ shown } onClick={this.toggle.bind(this)}>NAME 1...</div>

    <div className="mod-sum-container-s mod-sum-active ml-    auto" style={ hidden } onClick= {this.toggle.bind(this)}>SUMMARY 1...</div>

  </div>

  <div className="row">

    <div className="mod-sum-container-s ml-auto" style={ shown } onClick={this.toggle.bind(this)}>NAME 2...</div>

    <div className="mod-sum-container-s mod-sum-active ml-    auto" style={ hidden } onClick= {this.toggle.bind(this)}>SUMMARY 2...</div>

  </div>
)

【问题讨论】：

当用户点击name 1到summary 1，再点击summary 1到name1时是否需要切换？
是的，这是正确的 - 单击它会更改为摘要，然后如果用户再次单击，则返回名称。但它不会影响其他名称/摘要对。谢谢。
告诉我这是你需要的stackblitz.com/edit/react-sx3iis 吗？
非常感谢 - 我会试一试并告诉您。
这完全符合需要 - 非常感谢。

标签： reactjs

【解决方案1】：

在这种情况下，维护两个状态和一个函数就足够了，你需要做的就是：

this.state = {
  NAME1: true,
  NAME2: true,
};

在 JSX 中，将 data-* 属性设置为 data-name="NAME1"

    <div className="row">

        <div className="mod-sum-container-s ml-auto" style={{display : this.state.NAME1 ? "block" : "none" }} onClick={this.toggle} data-name="NAME1">NAME 1...</div>

        <div className="mod-sum-container-s mod-sum-active ml-    auto" style={{display : !this.state.NAME1 ? "block" : "none" }}  onClick= {this.toggle}  data-name="NAME1">SUMMARY 1...</div>

  </div>

  <div className="row">

        <div className="mod-sum-container-s ml-auto" **style={{display : this.state.NAME2 ? "block" : "none" }}** onClick={this.toggle} **data-name="NAME2"**>NAME 2...</div>

        <div className="mod-sum-container-s mod-sum-active ml-    auto" style={{display : !this.state.NAME2 ? "block" : "none" }} data-name="NAME2" onClick= {this.toggle}>SUMMARY 2...</div>

  </div>

在this.toggle

   toggle =(e) => {
    this.setState({
      [e.target.dataset.name]: !this.state[e.target.dataset.name]
    }, () => console.log(this.state));
  }

您可以查看完整的演示here

【讨论】：

【解决方案2】：

您可以使用表达式并在切换时设置状态

    


import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
      constructor() {
        super();
        this.state = {
          name: true,
          summary: false
        };
      }

      toggle() {
        this.setState({
          name: !this.state.name,
          summary: !this.state.summary,
        });
      }

      render() {
        return (
        <div className = "App" >
         <div className = "row" >
          {this.state.name &&
            <div className = "mod-sum-container-s ml-auto"
               onClick = {this.toggle.bind(this)} > Name </div>}
        {this.state.summary && <div className = "mod-sum-container-s mod-sum-active ml-auto"  onClick = {this.toggle.bind(this)}> Summary</div>}
        </div>
        </div>
      )
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：