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 />

(9)資料只想參考子階時，把State改成props~(影片05 2:00)

+77筆記counter-6-所有資料全參考父階.jsx