how to handle click only one item in react

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

First, Sorry for my Bad English. I want to make a category tree component and blew is my rendering code.

class tree extends Component {

constructor(props) {

    super(props);

    this.state = {

        showBig1: false,

        showBig2: false,

        showSmall1: false,

        showSmall2: false,

        current: 'fake',

        fake: false

    };



}



toggleBigMenu = (type, current_now) => {

    this.state = {

        [current_now]: false,

        [type]: true,

        current: type

    }

}





render() {

    const {showBig1, showBig2, showSmall1, showSmall2} = this.state

    return (

        <div>

            <li className={showBig1 ? "on" : "off"} onClick={this.toggleBigMenu("showBig1", current)}>

                <Link to="#">

                    <span>BIG MENU 1</span>

                </Link>

            </li>

            <li className={showBig2 ? "on" : "off"} onClick={this.toggleBigMenu("showBig2", current)}>

                <Link to="#">

                    <span>BIG MENU 2</span>

                </Link>

                <ul>

                    <li className={showSmall1 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall1", current)}>

                        <Link to="#">

                            <span>SMALL MENU 1</span>

                        </Link>

                    </li>

                    <li className={showSmall2 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall2", current)}>

                        <Link to="#">

                            <span>SMALL MENU 2</span>

                        </Link>

                    </li>

                </ul>

            </li>



        </div>

    )

}

}

and I want to click only one 'li' item at a time.
But When I click BIG MENU1, it clicked with BIG MENU 2.
And BIG MENU 2's state turn true, but I want to turn BIG MENU 1's state.

I don't know how to solve it.. please anyone help me.
Thank you.

asked Nov 16 '18 at 18:39

abbey

204

By writing onClick={this.toggleBigMenu("showBig1", current)} you are invoking this.toggleBigMenu directly on render. You can create a new function that will be invoked when the event occurs instead: onClick={() => this.toggleBigMenu("showBig1", current)}. Where is current coming from in your render method?

– Tholle
Nov 16 '18 at 18:42

1

@Tholle Thanks for your comment. I forgot to declare 'current' when moving code to the post. Sorry...

– abbey
Nov 16 '18 at 18:51

add a comment |

First, Sorry for my Bad English. I want to make a category tree component and blew is my rendering code.

class tree extends Component {

constructor(props) {

    super(props);

    this.state = {

        showBig1: false,

        showBig2: false,

        showSmall1: false,

        showSmall2: false,

        current: 'fake',

        fake: false

    };



}



toggleBigMenu = (type, current_now) => {

    this.state = {

        [current_now]: false,

        [type]: true,

        current: type

    }

}





render() {

    const {showBig1, showBig2, showSmall1, showSmall2} = this.state

    return (

        <div>

            <li className={showBig1 ? "on" : "off"} onClick={this.toggleBigMenu("showBig1", current)}>

                <Link to="#">

                    <span>BIG MENU 1</span>

                </Link>

            </li>

            <li className={showBig2 ? "on" : "off"} onClick={this.toggleBigMenu("showBig2", current)}>

                <Link to="#">

                    <span>BIG MENU 2</span>

                </Link>

                <ul>

                    <li className={showSmall1 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall1", current)}>

                        <Link to="#">

                            <span>SMALL MENU 1</span>

                        </Link>

                    </li>

                    <li className={showSmall2 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall2", current)}>

                        <Link to="#">

                            <span>SMALL MENU 2</span>

                        </Link>

                    </li>

                </ul>

            </li>



        </div>

    )

}

}

and I want to click only one 'li' item at a time.
But When I click BIG MENU1, it clicked with BIG MENU 2.
And BIG MENU 2's state turn true, but I want to turn BIG MENU 1's state.

I don't know how to solve it.. please anyone help me.
Thank you.

asked Nov 16 '18 at 18:39

abbey

204

By writing onClick={this.toggleBigMenu("showBig1", current)} you are invoking this.toggleBigMenu directly on render. You can create a new function that will be invoked when the event occurs instead: onClick={() => this.toggleBigMenu("showBig1", current)}. Where is current coming from in your render method?

– Tholle
Nov 16 '18 at 18:42

1

@Tholle Thanks for your comment. I forgot to declare 'current' when moving code to the post. Sorry...

– abbey
Nov 16 '18 at 18:51

add a comment |

First, Sorry for my Bad English. I want to make a category tree component and blew is my rendering code.

class tree extends Component {

constructor(props) {

    super(props);

    this.state = {

        showBig1: false,

        showBig2: false,

        showSmall1: false,

        showSmall2: false,

        current: 'fake',

        fake: false

    };



}



toggleBigMenu = (type, current_now) => {

    this.state = {

        [current_now]: false,

        [type]: true,

        current: type

    }

}





render() {

    const {showBig1, showBig2, showSmall1, showSmall2} = this.state

    return (

        <div>

            <li className={showBig1 ? "on" : "off"} onClick={this.toggleBigMenu("showBig1", current)}>

                <Link to="#">

                    <span>BIG MENU 1</span>

                </Link>

            </li>

            <li className={showBig2 ? "on" : "off"} onClick={this.toggleBigMenu("showBig2", current)}>

                <Link to="#">

                    <span>BIG MENU 2</span>

                </Link>

                <ul>

                    <li className={showSmall1 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall1", current)}>

                        <Link to="#">

                            <span>SMALL MENU 1</span>

                        </Link>

                    </li>

                    <li className={showSmall2 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall2", current)}>

                        <Link to="#">

                            <span>SMALL MENU 2</span>

                        </Link>

                    </li>

                </ul>

            </li>



        </div>

    )

}

}

and I want to click only one 'li' item at a time.
But When I click BIG MENU1, it clicked with BIG MENU 2.
And BIG MENU 2's state turn true, but I want to turn BIG MENU 1's state.

I don't know how to solve it.. please anyone help me.
Thank you.

asked Nov 16 '18 at 18:39

abbey

204

First, Sorry for my Bad English. I want to make a category tree component and blew is my rendering code.

class tree extends Component {

constructor(props) {

    super(props);

    this.state = {

        showBig1: false,

        showBig2: false,

        showSmall1: false,

        showSmall2: false,

        current: 'fake',

        fake: false

    };



}



toggleBigMenu = (type, current_now) => {

    this.state = {

        [current_now]: false,

        [type]: true,

        current: type

    }

}





render() {

    const {showBig1, showBig2, showSmall1, showSmall2} = this.state

    return (

        <div>

            <li className={showBig1 ? "on" : "off"} onClick={this.toggleBigMenu("showBig1", current)}>

                <Link to="#">

                    <span>BIG MENU 1</span>

                </Link>

            </li>

            <li className={showBig2 ? "on" : "off"} onClick={this.toggleBigMenu("showBig2", current)}>

                <Link to="#">

                    <span>BIG MENU 2</span>

                </Link>

                <ul>

                    <li className={showSmall1 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall1", current)}>

                        <Link to="#">

                            <span>SMALL MENU 1</span>

                        </Link>

                    </li>

                    <li className={showSmall2 ? "on" : "off"} onClick={this.toggleBigMenu("showSmall2", current)}>

                        <Link to="#">

                            <span>SMALL MENU 2</span>

                        </Link>

                    </li>

                </ul>

            </li>



        </div>

    )

}

}

and I want to click only one 'li' item at a time.
But When I click BIG MENU1, it clicked with BIG MENU 2.
And BIG MENU 2's state turn true, but I want to turn BIG MENU 1's state.

I don't know how to solve it.. please anyone help me.
Thank you.

javascript reactjs

asked Nov 16 '18 at 18:39

abbey

204

asked Nov 16 '18 at 18:39

abbey

204

asked Nov 16 '18 at 18:39

abbey

204

asked Nov 16 '18 at 18:39

abbey

204

asked Nov 16 '18 at 18:39

abbey

204

By writing onClick={this.toggleBigMenu("showBig1", current)} you are invoking this.toggleBigMenu directly on render. You can create a new function that will be invoked when the event occurs instead: onClick={() => this.toggleBigMenu("showBig1", current)}. Where is current coming from in your render method?

– Tholle
Nov 16 '18 at 18:42

1

@Tholle Thanks for your comment. I forgot to declare 'current' when moving code to the post. Sorry...

– abbey
Nov 16 '18 at 18:51

add a comment |

By writing onClick={this.toggleBigMenu("showBig1", current)} you are invoking this.toggleBigMenu directly on render. You can create a new function that will be invoked when the event occurs instead: onClick={() => this.toggleBigMenu("showBig1", current)}. Where is current coming from in your render method?

– Tholle
Nov 16 '18 at 18:42

1

@Tholle Thanks for your comment. I forgot to declare 'current' when moving code to the post. Sorry...

– abbey
Nov 16 '18 at 18:51

By writing onClick={this.toggleBigMenu("showBig1", current)} you are invoking this.toggleBigMenu directly on render. You can create a new function that will be invoked when the event occurs instead: onClick={() => this.toggleBigMenu("showBig1", current)}. Where is current coming from in your render method?

– Tholle
Nov 16 '18 at 18:42

@Tholle Thanks for your comment. I forgot to declare 'current' when moving code to the post. Sorry...

– abbey
Nov 16 '18 at 18:51

add a comment |

1 Answer
1

active

oldest

votes

Instead of passing in current every time you change menu, you can reset all menus to being false and just setting the clicked one to true.

Since you have menus inside other menus, it's also a good idea to call event.stopPropagation() on the click event so the nested menus have a chance of being selected.

Example

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

1

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53343621%2fhow-to-handle-click-only-one-li-item-in-react%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

Instead of passing in current every time you change menu, you can reset all menus to being false and just setting the clicked one to true.

Since you have menus inside other menus, it's also a good idea to call event.stopPropagation() on the click event so the nested menus have a chance of being selected.

Example

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

1

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

add a comment |

Instead of passing in current every time you change menu, you can reset all menus to being false and just setting the clicked one to true.

Since you have menus inside other menus, it's also a good idea to call event.stopPropagation() on the click event so the nested menus have a chance of being selected.

Example

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

1

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

add a comment |

Instead of passing in current every time you change menu, you can reset all menus to being false and just setting the clicked one to true.

Since you have menus inside other menus, it's also a good idea to call event.stopPropagation() on the click event so the nested menus have a chance of being selected.

Example

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

Instead of passing in current every time you change menu, you can reset all menus to being false and just setting the clicked one to true.

Since you have menus inside other menus, it's also a good idea to call event.stopPropagation() on the click event so the nested menus have a chance of being selected.

Example

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

const menus = {

  showBig1: false,

  showBig2: false,

  showSmall1: false,

  showSmall2: false

};



class Tree extends React.Component {

  state = { ...menus };



  toggleMenu = (event, type) => {

    event.stopPropagation();



    this.setState({

      ...menus,

      [type]: true

    });

  };



  render() {

    const { showBig1, showBig2, showSmall1, showSmall2, current } = this.state;



    return (

      <div>

        <li

          style={{ backgroundColor: showBig1 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig1")}

        >

          <span>BIG MENU 1</span>

        </li>

        <li

          style={{ backgroundColor: showBig2 ? "green" : "red" }}

          onClick={event => this.toggleMenu(event, "showBig2")}

        >

          <span>BIG MENU 2</span>

          <ul>

            <li

              style={{ backgroundColor: showSmall1 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall1")}

            >

              <span>SMALL MENU 1</span>

            </li>

            <li

              style={{ backgroundColor: showSmall2 ? "green" : "red" }}

              onClick={event => this.toggleMenu(event, "showSmall2")}

            >

              <span>SMALL MENU 2</span>

            </li>

          </ul>

        </li>

      </div>

    );

  }

}



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

<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>



<div id="root"></div>

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

answered Nov 16 '18 at 19:03

Tholle

44.9k54971

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

1

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

add a comment |

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

1

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

Gosh Thank you so much for helping me.Can I ask you one more question? When I try this code, when the link is moved by clicking li, the highlight of the menu disappears and is initialized. Is there a way to prevent this? Thank you so much again.

– abbey
Nov 16 '18 at 20:02

@abbey You're welcome! Sorry, I'm not quite sure what you mean. Maybe you could open up a new question demonstrating your issue if you can't find a solution?

– Tholle
Nov 16 '18 at 20:08

Yes It's work for me! I'm really thanks for your help.

– abbey
Nov 17 '18 at 12:13

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky