js change事件 获取新值和旧值_#千峰逆战班#--事件及列表渲染

#千锋逆战班#在千锋逆战班学习"React"已经13天了，今天整理了事件及列表渲染的笔记!

事件：

1.事件的首字母要大写 onXxx 形式

2. 事件绑定处理函数，要进行传参数方法

this.方法名字.bind(this,参数)

事件处理函数的最后一个参数是事件对象

例：

class Counter extends React.Component{
            constructor(props){
                super(props);
                this.state ={
                    n:1
                }
                //this.change = this.change.bind(this);
            }
            render(){
                let {n}= this.state;
                return <div>{n}
                            <button onClick={this.change.bind(this,3)}>
                            按钮</button>
                       </div>
            }
            change=(p,e)=>{  //让计数器+1
                    //e为事件对象
                    console.log(e)
                 this.setState({   //这个操作会触发render 
                     n:this.state.n +p 
                 },()=>{
                    console.log(this.state.n)
                 })
            }
        }}

遍历列表：

一，使用map方法进行映射，

二，使用for循环等

<div id="box"></div>
    <script type="text/babel">
           var arr =["aa","bb","cc"];
           var  lessons=["js","jq","css"];
           //方法一：使用map方法映射
            function showList(arr){
               return  (
                        <ul>
                        {
                            arr.map((item,index)=>
                             <li key={index}>{item}</li>) 
                        }
                        
                       </ul>
                       )
            }
            //方法二：使用for循环
            function showList2(arr){
                var temArr=[];
                for(var i=0;i<arr.length;i++){
                    temArr.push(<li key={i}>{arr[i]}</li>)
                }
                return <ul>{temArr}</ul>
            }
           ReactDOM.render(<div>
                                {
                                    showList2(arr)
                                }
                                {
                                    showList2(lessons)
                                }
                           </div>,
           document.querySelector("#box"))
    </script>

使用注意：1.return 后面要有字符或加一个小括号

2.遍历的每一项需要指定一个KEY值

遍历对象：

把对象的key值变为一个数组Object.keys(obj)

<div id="box"></div>
    <script type="text/babel">
          var obj2 ={a:1,b:2,c:3}
          // Object.keys 返回对象的所有的key值组成的数组
          var App = (props)=>{
              console.log(props.obj)
              return <div>
                        <ul>
                            {
                                Object.keys(props.obj).map((item)=>{
                                    return <li key={item}>
                                    {item}:{props.obj[item]}</li>
                                })
                            }
                        </ul>
                    </div>
          }
          function render(){
              ReactDOM.render(<App obj={obj2} />,
           document.querySelector("#box"))
          }
          render();
           
    </script>