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

debugcn 发表于 Dev

标记你

下面的代码用于在单击按钮时切换内容，并且在为每个单击的按钮显示其各自的内容时效果很好。

这是我想要实现的。

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

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

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

这是到目前为止的代码

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

瓦龙

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

import React, { Component } from "react"; 从“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"));

代码沙盒链接

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。