反応基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{()=>{状態変更関数}を使用する画面出力結果
Reference
この問題について(反応基3), 我々は、より多くの情報をここで見つけました https://velog.io/@minimal_time/React-기초3テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol