标签：11 02 const name val 05 newStyles useState 属性

需求：输入属性名和属性值后点击按钮，即可更改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')
)

标签：11,02,const,name,val,05,newStyles,useState,属性
来源： https://www.cnblogs.com/sx00xs/p/11833530.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。