useState

React

Hooksとは

Componentの中でイベントを起こすときに使います

例えば「再生ボタンのようにクリックすると再生マークから停止マークに変わります」のようなイベントです

HooksにはuseState , useEffect などいろいろなメソッドがあります

基本的な使い方

import {useState} from 'react';
const [現在の状態 , 更新関数] = useState(初期値)
更新関数(新しい値)

App.jsxだけで完結するカウンター

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <div className="counter">
        <h2>Counter App</h2>
        <p>{count}</p>
        <div className="buttons-row">
          <button onClick={() => setCount(count + 1)}>＋</button>
          <button onClick={() => setCount(count - 1)}>－</button>
        </div>
        <div className="button-reset">
          <button onClick={() => setCount(0)}>reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

応用バージョン（ファイルの分割）

components/PublishButton.jsx 

const PublishButton = (props) => {
    return(
        <button onClick={() => props.onClick()}>
            {props.isPublished.toString()}
        </button>
    )
}
export default PublishButton;

components/Article.jsx

import {useState} from 'react';
import {PublishButton, Title} from './index';

const Article = (props) => {
    const [isPublished, setIsPublished] = useState(false)
    const publishArticle = () => {
        setIsPublished(true)
    }
    return (
        <>
            <Title title={props.title} />
            <PublishButton isPublished={isPublished} onClick={publishArticle} /> <--- ???
        </>
    )
};
export default Article;

onClick={publishArticle} は　onClick={() => publishArticle()}　と同じ意味です

BACK