Reactを使ってBulmaのTabsを切り替える
概要
Vue.jsを使ってBULMAのtabsを切り替える
この記事を参考にして頂きました。
記事ではVueを使っていますが、今回はReactを使って書いていきます。
コード
App.js
import React, {useState} from "react";
function App() {
const [active, setActive] = useState('pictures');
return (
<div className="tabs">
<ul>
<li className={active === 'pictures' && 'is-active'}><a onClick = {() => setActive('pictures')}>Pictures</a></li>
<li className={active === 'music' && 'is-active'}><a onClick = {() => setActive('music')}>Music</a></li>
<li className={active === 'videos' && 'is-active'}><a onClick = {() => setActive('videos')}>Videos</a></li>
<li className={active === 'documents' && 'is-active'}><a onClick = {() => setActive('documents')}>Documents</a></li>
</ul>
</div>
);
}
export default App;
説明
App.js
import React, {useState} from "react";
function App() {
const [active, setActive] = useState('pictures');
return (
<div className="tabs">
<ul>
<li className={active === 'pictures' && 'is-active'}><a onClick = {() => setActive('pictures')}>Pictures</a></li>
<li className={active === 'music' && 'is-active'}><a onClick = {() => setActive('music')}>Music</a></li>
<li className={active === 'videos' && 'is-active'}><a onClick = {() => setActive('videos')}>Videos</a></li>
<li className={active === 'documents' && 'is-active'}><a onClick = {() => setActive('documents')}>Documents</a></li>
</ul>
</div>
);
}
export default App;
state変数のactiveはどのTabを強調するか表しています。そして，clickイベントが起こった時、useStateでstate変数を変更しています。リロードしたとき、activeがpicturesになるので、その時はuseEffectなどで対処しましょう。
以下のURLはコードのTabsを実装したものです
https://exampletab.netlify.app/
Author And Source
この問題について(Reactを使ってBulmaのTabsを切り替える), 我々は、より多くの情報をここで見つけました https://qiita.com/kumastry1/items/06a674f594c82236cdbf著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .