[React]onClickの使い方

onClick

今日は簡単にreactでonClickの使用方法を見てみましょう。

1. 準備

いいねボタン

ハートを押すと数字が上がる機能を作りましょう。
まずいいねボタンを作ります。

<h1> いいね！ <span>❤️</span> 0 </h1>

数字の部分は変わるのでstateに変更してあげます。
state使い方

function App(){
  
  let [heart, setHeart] = useState(0);
  return (
    <h1> いいね！ <span>❤️</span> { heart } </h1>
  )
}

2. どう使う?

<div onClick={関数}>

従来のジャバスクリプトコードとは異なり、cが大文字で 中括弧を入れるのが特徴です。

1. あらかじめ用意した関数を入れる。

   function App(){
   
     function 関数名(){
       console.log(1)
     }
     return (
        <div onClick={関数名}> こんにちは </div>
     )
   }
   

2. すぐ入れる。

   <div onClick={ function(){ コード } }> 
   <div onClick={ () => { コード } }> // arrow functionを使っても大丈夫です。
   

3. いいねを完成しましょう！

私はarrow functionをつかいますた。

function App(){
  
  let [ heart, setHeart ] = useState(0);
  return (
      <h4> いいね！ <span onClick={ ()=>{ setHeart(heart + 1) } } >❤️</span> { heart }</h4>
  )
}

onClickによるarrayデータの変更

今回はonClickを使ってarrayのデータを切り替えます。

今回は答えからお見せします。

function App(){
  
  let [location, setLocation] = useState( ['東京', '大阪', '名古屋'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...location];
      copy[0] = '福岡';
      setLocation(copy)
    } }> 修正 </button>
  )
}

arrayにあるデータ値を変える方法は本当に多様です。

最も注意すべき点はこれです。

let copy = location;
copy[0] = '福岡';
setLocation(copy)

これでは正しく変更できないんです。
その理由はstate変更関数は、値が変更された場合にのみ機能します。
locationはarryなので、中にはアドレス値が保存されています。
そのため、copy関数に入れても同じアドレス値がコピーされます。
それなら結局setLocation(copy)にあるcopyは最初と同じですね。

だからこれはオッケーです

let copy = [...location];
copy[0] = '福岡';
setLocation(copy)

ちなみに[...location]の...は括弧をなくす役割をします。