如何使用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'));