実現したいこと
ボタンを押したときにクラスを付与したい(クラスを複数持てるようにしたい)
例)
<button>color</button>ボタンを押すとpタグを以下のように変更し
<p class="color">This is a paragraph</p>
<button>font-weight</button>ボタンを押すとpタグを以下のように変更する
<p class="font-weight>This is a paragraph</p>
<button>color</button>と<button>font-weight</button>を押した際は以下のように変更する
<p class="color font-weight>This is a paragraph</p>
行ったこと
①<button>color</button>を押した際にpタグにcolorクラスを付与した
②<button>font-weight</button>を押した際にpタグにfont-weigthクラスを付与した。
躓いてしまっていること
pタグにcolorクラスを付与した後にfont-weightクラスをつけるようにonClick関数を新たに作成をしましたが
onClick関数が上書きされてしまい、意図したことがうまく実現できなくて困っております。
作成したコード
jsx
1import "./styles.css"; 2import { useState } from "react"; 3 4export default function App() { 5 const [className, setClassName] = useState(""); 6 const [className01, setClassName01] = useState(""); 7 8//colorクラスを付与 9 const handleClick = () => { 10 setClassName("color"); 11 }; 12 13//font-weightクラスを付与 14 const handleClick02 = () => { 15 setClassName01("font-weight"); 16 }; 17 18 return ( 19 <div className="App"> 20 <button onClick={handleClick}>color</button> 21 <button onClick={handleClick02}>font-weight</button> 22 23 <p className={(className, className01)}>This is a paragraph</p>//className01関数しか効かない 24 </div> 25 ); 26}
どなたかお時間のある方がいらっしゃいましたらご回答のほどよろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/12/29 12:12