React练习 11：02_05_函数传参改变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')
)