用新的onClick替换默认组件

Question

I need to achieve an task in my project. In that, I have a default component in the homepage, it will render everytime the page loads, by default. In that Component, i have four buttons or div's in the top and an Register button in the bottom. Now, when the user clicks an button or div in the top, it should pick a component assigned to that button and it should replace the default with the picked one, when the user clicks the Register button in the button. Below, is my code. Its not completed properly. Please let me know the way, by which i can achieve the desired output.

Thanks in advance.

class GetStart extends Component {

        constructor(props){
        super(props);
        this.state = {
            value: null,
        };
        };

      handleEvent = (button) => {
        this.setState({ value: button });
      };
        handleClick = () => {

        } ;

      render() {
          const { classes } = this.props;
          const { value } = this.state;
        return (
            <div>
                    <div className={classes.buttonComponent}>
                        <Button onClick={() => this.handleEvent(0)}>Component One</Button>
                        <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
                        <Button onClick={() => this.handleEvent(2)}>Component three</Button>
                        <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

                        <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
                            Register Now
                        </Button>
                    </div>
            switch(value){
               case 0: 
                 return <ComponentOne />;
               case 1:
                 return <ComponentTwo />;
               case 2:
                 return <ComponentThree />;
               case 3:
                 return <ComponentFour />;
               else:
                  return <DefaultComponent />;
                   }
                </div>
        );  
      }
    }



    export default GetStart;

Answer 1

You can't do a switch case inside the return . You will have to do it outside of it. Can you try this?

render() {
    const { classes } = this.props;
    const { value } = this.state;
    let component;
    switch (value) {
      case 0:
        component = <ComponentOne />;
        break;
      case 1:
        component = <ComponentTwo />;
        break;
      case 2:
        component = <ComponentThree />;
        break;
      case 3:
        component = < ComponentFour />;
        break;
      default:
        component =  <DefaultComponent />;
        break;
    }
    return (
      <div>
        <div className={classes.buttonComponent}>
          <Button onClick={() => this.handleEvent(0)}>Component One</Button>
          <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
          <Button onClick={() => this.handleEvent(2)}>Component three</Button>
          <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

          <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
            Register Now
          </Button>
        </div>
        {
          component
        }
      </div>
    )
  }

Answer 2

You cannot have a Switch statement within render return statement. You can instead have it in the render and assign the correct component to a variable and render it like below

render() {
  const { classes } = this.props;
  const { value } = this.state;
  let Comp;
  switch(value){
         case 0: 
           Comp =  ComponentOne;
         case 1:
           Comp =  ComponentTwo;
         case 2:
           Comp =  ComponentThree;
         case 3:
           Comp =  ComponentFour;
         else:
            Comp = DefaultComponent;
  }
  return (
      <div>
              <div className={classes.buttonComponent}>
                  <Button onClick={() => this.handleEvent(0)}>Component One</Button>
                  <Button onClick={() => this.handleEvent(1)}>Component Two</Button>
                  <Button onClick={() => this.handleEvent(2)}>Component three</Button>
                  <Button onClick={() => this.handleEvent(3)}>Component Four</Button>

                  <Button variant="contained" onClick={this.handleClick} className={classes.submitButton}>
                      Register Now
                  </Button>
              </div>
              <Comp />
          </div>
  );  
}

The above is however not the best way to do this and I would recommend you to go though react-router and use it for rendering conditional components. You can make use of MemoryRouter from react-router if you don't want to update the URL with the path assigned to each Route

Answer 3

I think you will need two state variables. One will hold the final value of component to render, and the other will be used to track the events as you click the buttons.

class GetStart extends Component {

constructor(props) {
    super(props);
    this.state = {
        value: null,
        componentToRender: null //tells switch which component to render
    };
    this.renderComponent = this.renderComponent.bind(this)
};

handleEvent = (button) => {
    this.setState({value: button});
};
handleClick = () => {
    this.setState({componentToRender: this.state.value})//take the
    // currently selected component and make it the component to render
};
    //extract the switch statement to a method of its own
renderComponent() {
    switch (this.state.componentToRender) {
        case 0:
            return <ComponentOne/>;
        case 1:
            return <ComponentTwo/>;
        case 2:
            return <ComponentThree/>;
        case 3:
            return <ComponentFour/>;
        default://replaced 'else' with 'default'
            return <DefaultComponent/>;
    }
}

render() {
    const {classes} = this.props;
    return (
        <div>
            <div className={classes.buttonComponent}>
                <Button onClick={() => this.handleEvent(0)}>Component
                    One</Button>
                <Button onClick={() => this.handleEvent(1)}>Component
                    Two</Button>
                <Button onClick={() => this.handleEvent(2)}>Component
                    three</Button>
                <Button onClick={() => this.handleEvent(3)}>Component
                    Four</Button>

                <Button variant="contained" onClick={this.handleClick}
                        className={classes.submitButton}>
                    Register Now
                </Button>
            </div>
            {this.renderComponent()}
        </div>
    );
   }
  }


  export default GetStart;

Answer 4

As others have mentioned, you are not able to make use of a switch statement in JSX like that.

Your code will be easier to understand if you seperate out parts of you logic into different functions.

I've created a Code Sandbox that has your required functionality to help get you started: https://codesandbox.io/s/zr766pkwpp