如何在 React 中更改显示 onclick？

Question

我想知道如何在 React 中将显示的几个元素从隐藏更改为可见。我有 4 个部分和每个部分按钮。开始部分有开始按钮，关于部分有关于按钮，技能部分有技能按钮，联系部分有联系按钮。如何在我单击“开始”时立即显示所有其他部分：none 并且只有“技能”部分可见？通过点击关于按钮，其他人会隐藏（none）并且只有关于是可见的？等到其他部分。

我知道我必须制作一个 handleonclick 但我不知道怎么做。它应该与国家合作吗？

import React, { Component } from 'react';
    import ReactDOM from 'react-dom';

    class Start extends Component {
        render() {
          return (
              <div className='start'>
              </div>
          );
        }
      }

    class About extends Component {
        render() {
          return (
            <div className='about'>
            </div>
          );
        }
      }
      
      class Skills extends Component {
        render() {
          return (
            <div className='skills'>
            </div>
          );
        }
      }
      
     class Contact extends Component {
        render() {
          return (
            <div className='contact'>
            </div>
          );
        }
      }
      
    class Buttons extends Component {
        render() {
          return (
            <div className="buttons">
              <button>Start</button>
              <button>About</button>
              <button>Skills</button>
              <button>Contact</button>
            </div>
          );
        }
    }

    class App extends Component {

      render() {
        return (
          <div className="App">
            <Buttons />
            <Main />
          </div>
        );
      }
    }

    ReactDOM.render(<App />, document.getElementById('root'));
    registerServiceWorker();

    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 1

您可以使用 conditional rendering.

selectSection = section => {
  this.setState({ section })
}

render() {
  return (
    <div className="App">
      <Buttons onClick={this.selectSection} />
      {this.state.section === "start" && <Start>}
      {this.state.section === "about" && <About>}
    </div>
  );
}

此外，您可以使用 switch.

而不是 if

Answer 2

在名为 App 的父容器中保留状态 activeSection。然后，将它作为道具传递给子部分组件，About、Skills 等。还要添加一个方法 handleToggleSection，您可以在单击按钮时调用它并更改状态 activeSection 到相应的部分名称。在所有部分组件中，About、Skills 等，检查当前部分名称。如果名称匹配，则 return html 或 return null。请记住，当您 return null 时，该组件不会挂载。如果你想保持组件挂载而不管它们是否可见，那么你需要使用 css 类像 show, hide 等

这是演示。

// import React from "react";
// import ReactDOM from "react-dom";

class Start extends React.Component {
  get show() {
    return this.props.activeSection === "start";
  }

  render() {
    if (this.show) {
      return <div className="start"> Start </div>;
    } else {
      return null;
    }
  }
}

class About extends React.Component {
  get show() {
    return this.props.activeSection === "about";
  }

  render() {
    if (this.show) {
      return <div className="about"> About </div>;
    } else {
      return null;
    }
  }
}

class Skills extends React.Component {
  get show() {
    return this.props.activeSection === "skills";
  }

  render() {
    if (this.show) {
      return <div className="skills"> Skills </div>;
    } else {
      return null;
    }
  }
}

class Contact extends React.Component {
  get show() {
    return this.props.activeSection === "contact";
  }

  render() {
    if (this.show) {
      return <div className="contact"> Contact </div>;
    } else {
      return null;
    }
  }
}

const Buttons = ({ onToggle }) => (
  <div className="buttons">
    <button name="start" onClick={onToggle}>
      Start
    </button>
    <button name="about" onClick={onToggle}>
      About
    </button>
    <button name="skills" onClick={onToggle}>
      Skills
    </button>
    <button name="contact" onClick={onToggle}>
      Contact
    </button>
  </div>
);

const Main = ({ activeSection }) => (
  <React.Fragment>
    <Start activeSection={activeSection} />
    <About activeSection={activeSection} />
    <Skills activeSection={activeSection} />
    <Contact activeSection={activeSection} />
  </React.Fragment>
);

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeSection: ""
    };

    this.handleToggleSection = this.handleToggleSection.bind(this);
  }

  handleToggleSection(e) {
    const { name } = e.target;
    this.setState(() => ({
      activeSection: name
    }));
  }

  render() {
    return (
      <div className="App">
        <Buttons onToggle={this.handleToggleSection} />
        <Main activeSection={this.state.activeSection} />
      </div>
    );
  }
}

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

.App {
  font-family: sans-serif;
  text-align: center;
}

.show {
  display: block;
}

.hide {
  display: none;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何在 React 中更改显示 onclick？

How to change display onclick in React?

reactjs

hide

display

visible