[React] state 연습

[React] state 연습

import { useState } from "react" ;

import "./styles.css" ;

const MinutesToHours = () = > {

const [amout, setAmout] = useState( 0 );

const [inverted, setInverted] = useState( false );

const onChange = ( event ) = > {

setAmout( event .target.value);

};

const reset = () = > {

setAmout( 0 );

};

const onFlip = () = > {

reset();

setInverted((current) = > setInverted( ! current));

};

return (

< div >

< label htmlFor = "minutes" > Minutes < / label >

< input

placeholder = "Minutes"

//입력값을 받을 때마다 minutes를 변경하고 싶을 때

value = {inverted ? amout * 60 : amout}

onChange = {onChange}

type = "number"

id = "minutes"

disabled = {inverted}

> < / input >

< h4 > You want to convert {amout} < / h4 >

< label htmlFor = "hours" > Hours < / label >

< input

placeholder = "Hours"

value = {inverted ? amout : Math.floor(amout / 60 )}

type = "number"

id = "hours"

onChange = {onChange}

disabled = { ! inverted}

> < / input >

< button onClick = {reset} > Reset < / button >

< button onClick = {onFlip} > {inverted ? "Turn back" : "Invert" } < / button >

< / div >

);

};

from http://codingbucks.tistory.com/258 by ccl(A) rewrite - 2021-12-31 01:27:13