如何选择<li>在 reactjs 中的按钮跨度中，下拉列表

Question

                            <div className="input-group-btn" data-dropdown>

                                <button className="btn btn-default dropdown-toggle" type="button"
                                        data-toggle="dropdown" aria-expanded="true">
                                    <span id="sortevent1" tabindex="0">1.select</span><span
                                    id="arrow" className="glyphicon glyphicon-align-center"></span>

                                </button>
                                <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                    <li role="presentation"><a role="menuitem" tabindex="1">1.select &nbsp;<span id="arrow-up"
                                                                className="glyphicon glyphicon-indent-right"></span></a>
                                    </li>
                                    <li role="presentation"><a role="menuitem" tabindex="2">2.select &nbsp;<span id="arrow-down"
                                                                className="glyphicon glyphicon-indent-left"></span></a>
                                    </li>
                                    <li role="presentation"><a role="menuitem" tabindex="3">3.select&nbsp;<span id="arrow-up"
                                                                className="glyphicon glyphicon-indent-right"></span></a>
                                    </li>

                                    <li role="presentation"><a role="menuitem" tabindex="4">4.select&nbsp;<span id="arrow-up"
                                                             className="glyphicon glyphicon-indent-right"></span></a>
                                    </li>

                                </ul>

                            </div>

How to select <li> and write button value(select button dropdown like select option) in reactjs?

Please help, I tried <li> inside onClick={this.userevent(this.target.tabindex)} and onChange but

userevent =(event)=>{

  console.log(event)
}

it didn't work it. How do I do with this code? Maybe use tabindex='1',2,3

Answer 1

Use the onFocus() event, and consider providing the tabindex to the li itself. Also, make the test of the button dependent on a state variable, which you set on switching between the options. Here is a working example.

<div className="input-group-btn" data-dropdown>

                            <button className="btn btn-default dropdown-toggle" type="button"
                                    data-toggle="dropdown" aria-expanded="true">
                                <span id="sortevent1" tabindex="0">{this.state.selected}</span><span
                                id="arrow" className="glyphicon glyphicon-align-center"></span>

                            </button>
                            <ul className="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                                <li role="presentation"  tabindex="1" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem"  >1.select &nbsp;<span id="arrow-up"
                                                            className="glyphicon glyphicon-indent-right"></span></a>
                                </li>
                                <li role="presentation"  tabindex="2" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem"   onFocus={(e)=>{console.log(e.target.parentElement.value)}}>2.select &nbsp;<span id="arrow-down"
                                                            className="glyphicon glyphicon-indent-left"></span></a>
                                </li>
                                <li role="presentation" tabindex="3" onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" >3.select&nbsp;<span id="arrow-up"
                                                            className="glyphicon glyphicon-indent-right"></span></a>
                                </li>

                                <li role="presentation" tabindex="4"  onFocus={(e)=>{this.setState({selected:e.target.value})}}><a role="menuitem" >4.select&nbsp;<span id="arrow-up"
                                                         className="glyphicon glyphicon-indent-right"></span></a>
                                </li>

                            </ul>

            </div>

These are changes I made:
1. Moved Tabindex to li from a.
2. Replaced the text in the button by this.state.selected
3. added onFocus event-handlers to each li

You can refactor it further. And do not forget to set the initial state in the constructor.