时间戳

首页 > 解决方案 > Reactjs：如何在单击按钮时一次显示一个切换的内容

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

问题描述

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

这是我想要实现的。

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

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

当我点击第二个按钮时，我只想看到第二个点击按钮的内容，同时隐藏第一个按钮的内容，依此类推。谢谢

这是到目前为止的代码

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

标签： reactjs

解决方案

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

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      shownId: undefined
    };
  }

  toggle(id) {
    this.setState({
      shownId: id
    });
  }

  render() {
    return (
      <div>
        <label>
          <ul>
            <button onClick={() => this.toggle(1)}>Toggle 1</button>
            <button onClick={() => this.toggle(2)}>Toggle 2</button>
            <button onClick={() => this.toggle(3)}>Toggle 3</button>

            <h2
              style={{ display: this.state.shownId === 1 ? "block" : "none" }}>Toggle record 1 appears Here
            </h2>
            <h2
              style={{ display: this.state.shownId === 2 ? "block" : "none" }}>Toggle record 2 appears Here
            </h2>
            <h2
              style={{ display: this.state.shownId === 3 ? "block" : "none" }}>Toggle record 3 appears Here
            </h2>
          </ul>
        </label>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

代码沙盒链接

推荐阅读