如何使用ReactJS使用onclick事件呈现不同的内容

Question

如何通过单击不同的按钮动态地呈现不同的内容。

我试图创建的时间表，点击星期一按钮将只显示演习和时间星期一，点击星期四它将只显示演习和时间周四等等。

活生生的例子在这里，https://www.free-css.com/free-css-templates/page228/stamina

按计划进行。

到目前为止我有这个代码，不是很多，但是.

import React from 'react';

class Monday extends React.Component {
    constructor (props) {
      super(props)
      this.state = { show: true };

      this.toggleDiv = this.toggleDiv.bind(this)
    }

    toggleDiv = () => {
      const { show } = this.state;

    }
    render () {
      return (
        <div>
          <button onClick={ this.toggleDiv } >
            Monday
          </button>
         {this.state.show && <Box1 />}
        </div>
      );
    }
  }

  class Box1 extends React.Component{
      render(){
          return(
            <div>
                Monday time
            </div>
          )
      }
  }


 export default Monday;

我在星期四也尝试过同样的方法，星期四只是应用这个代码，但是每个模块只允许一个默认的导出。

我如何编辑代码来将它应用于所有的日子？

Answer 1

您不需要每个日历日都有多个组件。您可以拥有单个组件并重用它。您可以在状态中使用字符串变量而不是布尔值，以便在不同的按钮上单击可以呈现不同的组件。此外，您已经使用了箭头函数，因此不需要在构造函数中进行对象/函数绑定。

此外，只导入所需的内容，不要从模块导入所有东西，例如导入仅响应并调用React.Component，这将将其导出的所有模块加载到包中。因此，相反，只导入组件。

我给出下面的代码，假设您不是动态地呈现按钮。

  import React, {Component} from 'react';

  export class Monday extends Component {
      constructor (props) {
           super(props)
           this.state = { showComponent: “” };
       }

      toggleDiv = (name) => {
            if(name === “monday”){
                  this.setState({
                       showComponent: “box1”
                  });
             }else if(name === “thursday”){
                  this.setState({
                      showComponent: “box2”
                  });
            }else{
                 this.setState({
                      showComponent: “”
                  });
            }
       }
      render () {
         return (
            <div>
               <button onClick={ this.toggleDiv(“monday”) } >
                     Monday
                </button>
              {this.state.showComponent === “box1” && <Box1 />}
               <button onClick={ this.toggleDiv(“thursday”) } >
                     Thursday
               </button>
               {this.state.showComponent === “box2” && <Box2 />}
                </div>
            );
         }
       }

       export class Box1 extends Component{
            render(){
                  return(
                       <div>
                            Monday time
                       </div>
                    )
               }
         }

              export class Box2 extends Component{
                      render(){
                           return(
                               <div>
                                     Thursday time
                                </div>
                              )
                        }
                 }

您之所以获得导出模块问题，是因为默认情况下星期一进行导出，因此模块默认只能导出一个组件，这是规则。如果您想要从单个模块导出多个组件，那么使用export星期一扩展组件来单独导出每个组件，而不是使用导出默认星期一。

希望这解决了您的查询。

Answer 2

下面是使用动态CSS display属性的另一种方法：

工作实例：

https://stackblitz.com/edit/react-toggle-content-on-click-a8gt5g

及有关守则：

render() {
 return (
    <div>
      <p onClick={() => this.toggle()}>
         Click This Text
      </p>
      <br />
      <br />
      <div style={{display : this.state.showOn ? 'inherit' : 'none'}}>
         <On/>
      </div>
      <div style={{display : this.state.showOn ? 'none' : 'inherit'}}>
         <Off/>
      </div>
    </div>
 );
}

Answer 3

下面是一个有用的例子：

https://stackblitz.com/edit/react-toggle-content-on-click

下面是主要组件的代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import On from './on';
import Off from './off';
import './style.css';

class App extends Component {
  constructor() {
     super();
     this.state = {
        name: 'React',
        showOn : true,
     };
  }

  render() {
     let toggledContent = null;
     if (this.state.showOn) {
        toggledContent = <On name={this.state.name} />;
     } else {
        toggledContent = <Off name={this.state.name} />;
     }
     return (
        <div>
          <p onClick={() => this.toggle()}>
             Click This Text
          </p>
          <br />
          <br />
          {toggledContent}
        </div>
     );
  }

  toggle() {
        this.setState((prevState, props) => {
            return {showOn : !prevState.showOn };
        });
  }
}

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