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(
        <>
        <div id="outer">
            <p>
                <label>属性名：</label>
                <input type="text" value={name} onChange={(e)=>setName(e.target.value)} />
            </p>
            <p>
                <label>属性值：</label>
                <input type="text" value={val} onChange={(e)=>setVal(e.target.value)} />
            </p>
            <p>
                <label></label>
                <button onClick={()=>handlClick(name,val)}>确定</button>
                <button onClick={()=>handleReset(styles)}>重置</button>
            </p>
        </div>
        <div id="div1" style={styles} >在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。</div>
        </>
    )
}
ReactDOM.render(
    <ChangeAttrs/>,
    document.getElementById('root')
)