React/VanillaJS totalCountの作成

30248 ワード
JavaScript React テキストリンク

n/a.ターゲット


カウントを行う3つの部分と、それを1つの部分として計算します.

VanillaJSを使用して作成

  • ファイル
    • が必要です
  • index.html
  • App.js
  • index.js

    • index.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>
<script src="App.js" type="module"></script>
</body>
</html>

    App.js

    import Counter from './Components/Counter/index.js'

const $app = document.querySelector('#app')
const $target = $app;

let totalCount = 0;

$app.innerHTML =
  `<div>
        <span>TotalCount</span>
        <span id="totalCount" >0</span>
    </div><br>`

new App({
  $target : $app
})

function App({ $target }){
  new Counter({
    $target,
    onIncrease : ($target  )=>{
      totalCount++
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    },
    onDecrease : ($target )=>{
      totalCount--
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    }
  }),
  new Counter({
    $target,
    onIncrease : ($target )=>{
      totalCount++
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    },
    onDecrease : ($target )=>{
      totalCount--
      $target.querySelector('#totalCount').innerHTML = String(totalCount)
    }
  }),
    new Counter({
      $target,
      onIncrease : ($target )=>{
        totalCount++
        $target.querySelector('#totalCount').innerHTML = String(totalCount)
      },
      onDecrease : ($target )=>{
        totalCount--
        $target.querySelector('#totalCount').innerHTML = String(totalCount)
      }
    })
}

    Components/Counter/index.js

    export default function Counter({ $target , onIncrease , onDecrease }){
  const $div = document.createElement('div');
  $target.appendChild($div)
  let count = 0

  this.render = ()=>{
    const random = Math.floor(Math.random() * 1000000)
    const increaseId = `increase${random}`
    const decreaseId = `decrease${random}`

    $div.innerHTML = `
      <span id="count" style="font-size:40px">0</span><br/>
      <button id=${increaseId}>+</button>
      <button id=${decreaseId}>-</button>
     `

    document.querySelector(`#${increaseId}`).addEventListener('click',()=>{
      count++;
      $div.querySelector('#count').innerHTML = String(count)
      onIncrease($target , count);
    })

    document.querySelector(`#${decreaseId}`).addEventListener('click',()=>{
      count--;
      $div.querySelector('#count').innerHTML = String(count)
      onDecrease($target ,count);
    })
  }

  this.render();
}
    注意が必要なのはCounter/indexです.js内部コードはonIncreaseやonDecreaseがどのように実現されるかには関心を持たないが,内部コードでonIncreaseやonDecreaseを実行する場合,パラメータとして存在する部分のようになる.

    応答として


    寒波が必要な日
  • App.js
  • index.js

    • App.js

    import Counter from './components/Counter'
import {useState} from "react"

function App(){
  const [totalCount , setTotalCount] = useState(0)

  return (
    <div>
      TotalCount : {totalCount}
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>

    </div>
  )
}

export default App;

    Components/Counter/index.js

    import {useState} from "react";

function Counter({onIncrease, onDecrease}){
  const [count , setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count+1)
    onIncrease(count + 1)
  }

  const handleDecrease = () => {
    setCount(count-1)
    onDecrease(count - 1)
  }

  return (
    <div>
      <span style={{fontSize:40}}>{count}</span><br/>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  )
}

export default Counter;
    こちらもCounter/indexjs内部コードはonIncreaseやonDecreaseがどのように実現されるかには関心を持たないが,内部コードでonIncreaseやonDecreaseを実行する場合,パラメータとして存在する部分のようになる.
    Zabbix2.2+LNMPソースのインストール
    21.04.04 TIL ES6