反応基3

6764 ワード

イベント処理方法


onClick={クリック時に実行される関数}
ocnClick={()=>{実行するコンテンツ}
{}に関数を含める必要があります!
/* eslint-disable */ -> 노란색 에러 제거 방법
import React, { useState } from 'react';
import './App.css';

function App() {
  let [글제목, 글제목변경] = useState(['빵집 추천' , '선릉 맛집','맛집 리스트']);
  let posts = '강남 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className="list">
        <h3> {글제목[0]} <span onClick={()=>{ console.log(1) } }>👍</span> 0 </h3>
       <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[1]} </h3>
       <p>2월 17일 발행</p>
        <hr/>
      </div>
      <div className="list">
        <h3> {글제목[2]} </h3>
       <p>2월 17일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

export default App;

👍 クリックごとに1増加

let [따봉, 따봉변경] = useState(0);
<h3> {글제목[0]} <span onClick={ ()=>{ 따봉변경(따봉 + 1) } }>👍</span> {따봉} </h3>
spanでonClick{()=>{状態変更関数}を使用する
画面出力結果