Question

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

下面的代码似乎可以完成，但是如果单击一个，则所有代码都会更改（一次只能更改一个）。我认为这是因为存在共享状态，但是我无法弄清楚如何捕获和处理被单击的内容，因此它只能更改相应的div。为了节省空间，我将四对中的两对放入了代码段。

谢谢！

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>
)

Answer 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

Answer 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>

React.js显示/隐藏较大集合中的两个div之一

2 个答案: