React 연습 11:0205_함수 트리거가 Div 임의 속성의 값을 변경합니다.

수요: 속성 이름과 속성 값을 입력한 후 버튼을 누르면div의 속성을 변경하고 리셋을 눌러 복원할 수 있습니다.
요점:react에서 input은 제어된 요소입니다.value 귀속state, 귀속onChange 이벤트 처리입니다.

import React,{useState,useEffect} from 'react';
import ReactDOM from 'react-dom';
import './index.css';

function ChangeAttrs(){
    const [name,setName]=useState('background');
    const [val,setVal]=useState('blue');
    const [styles,setStyles]=useState({});
    const handlClick=function(name,val){
        var newStyles={};
        newStyles[name]=val;
        console.log(newStyles);
        setStyles(newStyles);
        
    }
    const handleReset=function(){
        setStyles({});
    }
    return(
        <>
        

            

                   ：
                setName(e.target.value)} />
            
            

                   ：
                setVal(e.target.value)} />
            
            

                
                handlClick(name,val)}>  
                handleReset(styles)}>  
            
        
        
        "   " "   "，          。
        >
    )
}
ReactDOM.render(
    ,
    document.getElementById('root')
)