Question

我的页面上有5个标签。每个标签包含不同的数据。

每个选项卡中都有一个按钮，基本上是希望激活下一个选项卡以在用户单击该按钮时显示内容。

render(){
         return (
        <div>
            <h1>Tell us About yourslef</h1>
            <ul className="nav nav-tabs" role="tablist">
                <li role="presentation"><a href="#tab-menu-1" role="tab" data-toggle="tab" className="text-uppercase active">Personal</a>
                </li>
                <li role="presentation"><a href="#tab-menu-2" role="tab" data-toggle="tab" className="text-uppercase">Contact</a>
                </li>
                <li role="presentation"><a href="#tab-menu-3" role="tab" data-toggle="tab" className="text-uppercase">Verification</a>
                </li>
                <li role="presentation"><a href="#tab-menu-4" role="tab" data-toggle="tab" className="text-uppercase">Preferences</a>
                </li>
                <li role="presentation"><a href="#tab-menu-5" role="tab" data-toggle="tab" className="text-uppercase">Notifications</a>
                </li>
            </ul>
            <div className="tab-content" id="myTabContent">
                <div id="tab-menu-2">
                    <h1>This is Personal Tab</h1>
                    <button type="submit">Next</button>
                </div>
            </div>
            <div className="tab-content" id="myTabContent">
                <div id="tab-menu-3">
                    <h1>This is Contact Tab</h1>
                    <button type="submit">Next</button>
                </div>
            </div>
            <div className="tab-content" id="myTabContent">
                <div id="tab-menu-4">
                    <h1>This is Verification Tab</h1>
                    <button type="submit">Next</button>
                </div>
            </div>
            <div className="tab-content" id="myTabContent">
                <div id="tab-menu-5">
                    <h1>This is Notifications Tab</h1>
                    <button type="submit">Next</button>
                </div>
            </div>
        </div>
    )   
}

我该怎么做？

Answer 1

https://reactjs.org/community/routing.html

我建议查看这些文档，以了解有关关系属性类型和对象的更多信息。 How to create dynamic href in react render function? https://reactjs.org/docs/lists-and-keys.html| https://babeljs.io/docs/en/learn|

https://reactjs.org/tutorial/tutorial.html#function-components 您可以在Js上对函数进行模式化，以最好地处理导入时的页面。

在此代码上单击按钮时，React- Active下一个选项卡

1 个答案: