Day59 (React)

1.接续昨天

(1)绑onclick事件给按钮，并执行handleClick

    handleClick(){  
        alert("OK");
    }

    <button onClick={this.handleClick} className="btn btn-outline-success">handleClick的function</button><hr />

(2)抓this => 才找的到this

    handleClick = () => {  
        alert("OK" + this);
        console.log(this);
    }

(3)资料改完，画面同时显示

    handleClick = () => {  

        // 方法1.
        // this.state.count += 1;  //+1
        // this.setState({}); //网页跑完後，变更内容同时变更显示

        // 方法2.
        // var newState = {...this.state}; //... = 旧的
        // newState.count+=1;
        // this.setState(newState);

        // 方法3.
        // this.setState({
        //     count : ++this.state.count //先+1 容易出错，少用
        // });

        // 方法4.
        this.setState({
        count : this.state.count +1  
        });

会发现只有个别元件再变化

(4)增加参数

方法1.

            //让 handleClick3 拿取资料
            handleClick2 = () => {  
              alert("OK" + this);
               console.log(this);
               this.setState({
                  count : this.state.count +1  
               });
            }

            //抓handleClick2并只让id:1改变
            handleClick3 = (id) => {  
                this.handleClick2({id:1});
                console.log(id);
            }


            <button
              // 让id:1传进来 console.log检查
              onClick={ () => {this.handleClick3(1)}}   
              className="btn btn-outline-success"
            >按我
            </button><hr />

            <button
              // 让id:2传进来 console.log检查
              onClick={ () => {this.handleClick3(2)}}   
              className="btn btn-outline-success"
            >按我按我
            </button><hr />

方法2.

            // 合并 (handleClick2 + handleClick3)
            handleClick4 = (myCount) => {  
              var newState = {...this.state}; //... = 旧的
              myCount++;
              newState.count = myCount;
              this.setState(newState);
              alert("handleClick4++")
            }

            <button
              onClick={ () => {this.handleClick4(this.state.count)}}   
              className="btn btn-outline-success"
            >按我按我按我
            </button><hr />

(5)让每个元件可个别被更改

(5-1)Lab_counters > counter-app > index.js

      import Counter from './components/counter.jsx'; //引用有物件的.js 需from
      import Counters from './components/counters.jsx'; //引用有物件的.js 需from

      ReactDOM.render(
        <React.StrictMode>
          <Counter />   
          <Counters />   //新增
          <button className="btn btn-outline-success">index.js内的</button>
        </React.StrictMode>,
        document.getElementById('root')
      );

(5-2)Lab_counters > counter-app > src > components > counters.jsx 新增物件

       import React, { Component } from 'react';  //引用react
       import Counter from './counter.jsx';   //引用counter.jsx
       
       class Counters extends Component {   //制作Counters
           state = {  }
           render() { 
               return ( 
                   <div>
                       <Counter />
                       <Counter />
                       <Counter />
                   </div>
                );
           }
       }
        
       export default Counters;

(5-3)http://localhost:3000/
每个元件分开互动，不受影响

(6)变更元件显示方式

Lab_counters > counter-app > src > components > counters.jsx

    class Counters extends Component {   //制作Counters
    state = { 
        counters:[
           {id:1,value:1},
           {id:2,value:2},
           {id:3,value:3},
           {id:4,value:4}
        ] 
    }

    render() { 
        return ( 
            <div>
                {/* state.counters 有4个用map方法，跑4次 */}
                {this.state.counters.map(c => <Counter key={c.id} />)} 
                {/* 跑1次 */}
                <Counter />
            </div>
         );
    }

(7)藉由子元素更改父元素

(7-1)Lab_counters > counter-app > src > components > counters.jsx

class Counters extends Component {   //制作Counters
    state = { 
        counters:[
           {id:1,value:1},
           {id:2,value:2},
           {id:3,value:3},
           {id:4,value:4}
        ] 
    }

    render() { 
        return ( 
            <div>
                {/* 此处value 更改counter.jsx内Counter元素value */}
                {this.state.counters.map(c => <Counter key={c.id} value={c.value} />)}

(7-2)Lab_counters > counter-app > src > components > counter.jsx

    class Counter extends Component {
    state = {  
        count: this.props.value //由counters.jsx的counters元件[]更改value
    }

(8)利用[]制作value相加

(8-1)Lab_counters > counter-app > src > components > counters.jsx

    state = { 
        counters:[
           {id:1,value:1},
           {id:2,value:2},
           {id:3,value:3},
           {id:4,value:8},
           {id:5,value:8},
        ] 
    }

    // state.counters.value++
    getTotal(){
        var total = 0;
        for(let i = 0; i<this.state.counters.length;i++){
            total += this.state.counters[i].value;
        }
        return total
    }


    // 任何id++影响getTotal() ++
    doIncrement = (id) => {
        alert("ok");
   
        for(let i = 0; i < this.state.counters.length;i++){
            if(this.state.counters[i].id == id){
               this.state.counters[i].value +=1 ;
               break;
           }
        }
      this.setState({});
      console.log(id);
    }

    render() { 
        return ( 
            <div>
                {/* 1.state.counters 有4个用map方法，跑4次 */}
                {/* {this.state.counters.map(c => <Counter key={c.id} />)}  */}
                {/* 2.此处value 更改counter.jsx内Counter元素value */}
                {/* {this.state.counters.map(c => <Counter key={c.id} value={c.value} />)} */}
                {/* 跑1次 */}
                <Counter />

                {/* state.counters.value++ */}
                <h1>Total:{this.getTotal()}</h1><hr />

                {/* 新增onIncrement、id  由 counter.jsx的render接收*/}
                {this.state.counters.map(c => <Counter key={c.id} value={c.value} onIncrement={this.doIncrement} id={c.id}/>)}<hr />
            </div>
         );
    }
}

(8-2)Lab_counters > counter-app > src > components > counter.jsx

            {/* 此处接收counters.jsx 的 onIncrement={this.doIncrement} id={c.id} */}
            {/* 找到指定的编号，作用 */}
            {/* 前面按钮会无作用，因为没有抓到id */}
            <button
              onClick={ () => { this.props.onIncrement(this.props.id) }}   
              className="btn btn-outline-success"
            >我是Total会变化的按钮
            </button><hr />