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

(9)资料只想参考子阶时，把State改成props~(影片05 2:00)

+77笔记counter-6-所有资料全参考父阶.jsx