ReactをYoutube動画で学ぶ④～フォーム内のテキストボックスに入力された値を受け取り、テキストとして表示～

www.youtube.com

index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import ButtonText from './ButtonText'

import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>

    <ButtonText />

  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

ButtonText.js

import './buttontext.css';

import Btc from './components/BTContents';

const ButtonText = ()=>{

   return(

    <div className='text'>

        <Btc

            text = {"今日は休み"}

            buttonText = {"PUSH"}

        />

    </div>

   )

}

export default ButtonText;

BTContents.js （create-first\src\components\BTContents.js）

import { useState } from "react";

const Btc = function(props){

    const [textbox,setTextbox] = useState('');

    const handleChange = (e) => {

      setTextbox(()=> e.target.value);

    }

    const [description,setDescription] = useState('今日は休み');

    function changeDescription(){

        setDescription('今日は仕事');

    }

    return(

        <div>

          <form>

            <input type="text"

                   value={textbox}

                   onChange={handleChange}            

            />

            <p>text:{textbox}</p>

          </form>

          <div>{props.text}</div>

          <div>{description}</div>

          <button onClick={changeDescription}>{props.buttonText}</button>

        </div>

    )

}

export default Btc;

buttontext.css

@charset "utf-8";

.text{

    color: #ff0000;

}