ボタン押下でみえたりきえたりするなにかをReactで作ってみた

ブログから記事を見つけたい場合はこちら

ブログ地図 - 茨城エンジニアのPython開発日記

こんにちは松原です。眠いです。

今日はReactで題記のものを作ってみました。これ。

Reactでちょっと遊んでみました。
ボタン押下でcss変更してます。

クイズ大会の進行とかに意外と便利かも…？ pic.twitter.com/c5RYLbGfFg

— ごまあぶら (@tsukuruiroirop1) 2022年4月2日

メモとしてソースコード書いておきます。
いい加減こういうの、githubにためていきたい。

npm create-react-appでプロジェクト作成して、変えたのは以下です。

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ButtonName from './components/ButtonName';

function App() {
  
  const handleClick = ()=>{
    console.log(name[0])
  }


  return (
    <div className="App">
      <header className="App-header">
        {/* <img src={logo} className="App-logo" alt="logo" /> */}
      
      <ButtonName ButtonTxt="ねこ" />
      <ButtonName ButtonTxt="いぬ" />
      <ButtonName ButtonTxt="しか" />
      <ButtonName ButtonTxt="とり" />
      <ButtonName ButtonTxt="ぴざ" />
      <ButtonName ButtonTxt="がんだむ" />
      <ButtonName ButtonTxt="めがんて" />
      <ButtonName ButtonTxt="とぽろじー" />

      </header>
    </div>
  );
}

export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.Display {
  text-align: center;
  background: black;
  color: white;
  width: 100px;
  height: 50px;
  margin: 30px;
}

.NoDisplay {
  text-align: center;
  background: black;
  color: black;
  width: 100px;
  height: 50px;
  margin: 30px;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

ButtonName.tsx(新規作成)

import React, { useState } from 'react';
import logo from './logo.svg';
import '../App.css';

function ButtonName(props: any) {

  /* 名前表示フラグ */
  const [IsDisplayName, setIsDisplayName] = useState<boolean>(false);

  /*引数取得*/
  const ButtonInfo = {
    name: props.ButtonTxt
  }

  /*ボタン押下イベントハンドラ*/
  const handleClick = ()=>{
    setIsDisplayName(!IsDisplayName);
    console.log(ButtonInfo.name);
    console.log(IsDisplayName);
  }

  /*コンポーネント*/
  return (
      <button className={IsDisplayName ? "Display" : "NoDisplay"} onClick={handleClick}>
        {ButtonInfo.name}
      </button>
  );

}

export default ButtonName;

小物のUI作るならReact楽だなあという印象。
それではまた。