如何使用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并调用React.Component，这会将其所有导出的模块加载到bundle中。 因此，仅导入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>
                              )
                        }
                 }

之所以会出现导出模块问题，是因为默认情况下是星期一导出，因此默认情况下模块只能导出一个组件，这就是规则。 如果要从单个模块导出多个组件，则使用导出类“星期一”分别导出每个组件，可以扩展“组件”而不是“导出默认星期一”。

希望这可以解决您的查询。

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