「返信」ボタン機能の作成(onCilckボタン増加+1、個別増加)

10662 ワード
React テキストリンク

useState構文


ステータス変数には初期値があります.
このstate変数の値は、ステータス変更関数()を使用してのみ変更できます.
let [상태변수, 상태변경함수] = useState( 초기 값)

useStateを使用してデフォルト状態変数値を設定する

  • like状態変数初期値:0
    すなわち、ボタンを0に設定し、ボタンを押すときは1を増やす.
  • setLike状態変更関数の設定
    ボタンを押すと1の関数を増やして、状態を変更できます!
    • 
 let [like, setLike] = useState(0);

  // 블로그 이름 목록 초기 셋팅
  let [blogName, setBlogName] = useState([
    "코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천",
  ]);

    いいねを押すと数字が上がる機能

  • onClickイベントを使用します.👍 クリックすると、カッコ内の関数{()=>{コード実行}}が実行されます.
  • setLike(like + 1); ≪ステータス変更関数の使用|Use Status Change Function|emdw≫:ステータス変更関数()カッコ内で、likeの既存のステータス変数のデフォルト値0に+1を加算します.
  • ボタンonClick={()=>{setLike(like+1);}>を押します.ステータス変更関数を実行するたびに+1が増加します.
    • <div className="list">
            <h3> {blogName} 
              <span onClick={() => { setLike(like + 1); }} > 👍 </span> {like} </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>
  • 最初の文章の、もし5回の賛ボタンを押したら?すべての文章の賛数が5になります!

    • 個人のいいねを増やすなら?


    =>この方法の欠点は、データを増やすたびに[0,0,0,0]0を追加し続けることです.
    後でデータを入力するたびに、私たちはそれを自分で見てやらせます.
    初期値[0,0,0]などの状態変数は
  • 個の賛数を高めることができる
    -配列を使用して、ブログ名データの数に応じて初期値を調整します.
    •  let [like, setLike] = useState([0, 0, 0]);
    mapの特性を利用して,ボタンをクリックするとonclickのlikeの個数が1増加する.

  • map最初のパラメータel:要素ごとに見出し(順番)

  • mapの2番目のパラメータi:各要素のインデックス、位置を表す.

  • 変数を作成し、like[0,0,0]配列値をコピーしてインポートします.
    -コピー!表計算ドキュメントの構文

  • likecnt[i]+:ボタンを押して、対応する文章番号にlike賛iの1番目の要素を追加し、0に+1を追加します.

  • setLike(likecnt):ステータス変数関数を使用して、ステータス変数を+1の値で置き換えます.

  • {like[i]}:この文章番号と同じ賛要素を出力します(プラス1).
    •   {blogName.map((el, i) => {
        return (
          <div className="list" key={i}>
            <h3>
              {el}
              <span
                onClick={() => {
                  let likeCnt = [...like];
                  likeCnt[i]++;
                  setLike(likeCnt);
                }}
              >
                👍
              </span>
              {like[i]}
            </h3>
            <p>3월 02일 발행</p>
            <hr />
          </div>
        );
      })}

    最初のコメントのいい言葉で?最初のコメントだけをアップロードしていいですね!


    Vscode端末起動ガイドを閉じる
    Struts 2 Interceptor構成(3つの方法)