Question

下面的代码用于在单击按钮时切换内容，它的效果非常好，因为每个单击按钮都会显示其各自的内容。

这是我要实现的目标。

现在，我的任务是在单击按钮时显示一个折叠内容记录。

这是我的意思，当我单击第一个按钮时，内容将被切换并显示。

当我单击第二个按钮时，我希望在隐藏第二个按钮时仅看到第二个按钮的内容内容第一等。谢谢

这是到目前为止的代码

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
      shown: true,
 shown1: true,
 shown2: true,
 shown3: true,
    };
  }

  componentDidMount() {
    this.setState({
    });
  }



toggle1() {
        this.setState({
            shown1: !this.state.shown1
        });
    }



toggle2() {
        this.setState({
            shown2: !this.state.shown2
        });
    }



toggle3() {
        this.setState({
            shown3: !this.state.shown3
        });
    }



  render() {

var shown = {
            display: this.state.shown ? "block" : "none"
        };

        var hidden1 = {
            display: this.state.shown1 ? "none" : "block"
        }
        var hidden2 = {
            display: this.state.shown2 ? "none" : "block"
        }
        var hidden3 = {
            display: this.state.shown3 ? "none" : "block"
        }




  return (
      <div>
        <label>
          <ul>


<button onClick={this.toggle1.bind(this)}>Toggle 1</button>
<button onClick={this.toggle2.bind(this)}>Toggle 2</button>
<button onClick={this.toggle3.bind(this)}>Toggle 3</button>

            <h2 style={ hidden1 }> Toggle record 1 appears Here</h2>
            <h2 style={ hidden2 }> Toggle record 2 appears Here</h2>
            <h2 style={ hidden3 }> Toggle record 3 appears Here</h2>
          </ul>
        </label>
      </div>
    );
  }
}

Answer 1

稍微重构一下。您可以应用一些CSS来使内容折叠。

从“反应”中导入React，{组件}；从“ react-dom”导入ReactDOM；

export const store = new Vuex.Store({
  state: {
    photons: {},
    token: '',
  },
  mutations: {
    setUser(state, value) {
      value.data.forEach(element => {
        state.photons[element.id].user = element.data    
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[0].to=parseInt(element.data.tempAlert,10) 
        state.photons[element.id].GaugeOptions.optionsLastTempF.highlights[1].from=parseInt(element.data.tempAlert,10)+1 
      });
    }},
actions: {
 async getData(context) {
      let db = []
      let photon = {}
      db = await axios.get('http://13.14.13.1:3300/DB')
      db.data.forEach(item => {
        if ([Object.keys(item)[0]] in photon) {
          let dataString = (Object.values(item)[0]).split(',')
photon[Object.keys(item)[0]].GaugeOptions={}
          photon[Object.keys(item)[0]].GaugeOptions.optionsLastTempF={
            title: 'Last Temp',
            units: "°F",
            minorTicks: 10,
            majorTicks: ['0', '20', '40', '60', '80', '100', '120', '140', '160'],
            maxValue: 160,
            highlights: [{
                    "from": 0,
                    "to": 0,
                    "color": "rgba(0,255,0)"
                },
                {
                    "from":0,
                    "to": 160,
                    "color": "rgba(255,0,0)"
                },

            ],
            colorPlate: '#222',
            colorUnits: '#ccc',
            colorTitle: '#eee',
            colorNumbers: '#eee',
            width: 200,
            height: 200
          }
 context.commit('setData', photon)
    }
}
}

Codesandbox link

Reactjs：如何在单击按钮时一次显示一个切换的内容

1 个答案: