for循环

for循环

div里面写逻辑的话用{}括起来

删除循环中的一项，delet

先遍历一个数组，然后定义一个事件

然后定义这个事件

循环中的数据修改

import React, { Component } from 'react';
import './App.css';
import Person from './component/person';

class App extends Component {
  /*
  state:用于改变组件内容状态的值(动态)
  props：用于组件通信进行传值。
  * */
    state = {
        persons:[
            {id:1,name:"sdf",count:10},
            {id:2,name:"sasdf",count:151450},
            {id:3,name:"swer",count:1854651}
        ],
        otherState:"anhthing",
        /*定义一个状态，控制是否展示，默认为不展示，只有为真的时候展示*/
        showPersons:false


    }
    swithNameHandler(newName){
      this.setState({
          persons:[
              {name:newName,count:10},
              {name:"xcb",count:151450},
              {name:"swer",count:11},
          ]
      })
    }
    nameChangedHandler(e,id){
        //拿到这个属于，调用一个方法personIndex，传回来一个对象，
        // 如果这个对象和当前的ID相等，就return回去，得到的就是一个对应的下标
        const personIndex = this.state.persons.findIndex(p => {
            return p.id === id;
        })
        //拿到这个对象，然后把下标放进去，就可以拿到所需要的对象
        const  person = {...this.state.persons[personIndex]}
        //使用person，直接给他赋值，改变当前的内容进行修改
        person.name = e.target.value;
        //拿到当前整个数组，
        const  persons = [...this.state.persons];
        //找到当前数组的对象，然后把修改过得内容付给它
        persons[personIndex] = person;

        //更改当前的状态
        this.setState({
            persons:persons
        })
    }

    togglePersonHandle(){
        //先拿到当前的状态值，是真还是假
        const doesShow = this.state.showPersons;
        this.setState({
            //如果拿到的是false，取非就变成了真，每次点击的话就是改变当前的状态
            showPersons:!doesShow
        })
    }
    deletePersonHandler(personIndex){
        // const  person = this.state.person;
        //操作运算符，后期添加东西方便
        const  persons = [...this.state.persons];
        persons.splice(personIndex,1);
        this.setState({
            persons:persons
        })
    }
  render() {
        const style={
            backgroundColor:'white',
            font:'inherit',
            border:'1px solid blue',
            padding:'8px',
            cursor:'pointer'  //小手状态
        };

        let persons = null;  //默认是null
        //如果状态为真的话，就给persons重新赋值
        if(this.state.showPersons){
            persons = (
                <div>
                    {

                        this.state.persons.map((person,index) => {
                            return  <Person
                                changed={(e)=>this.nameChangedHandler(e,person.id)}
                                myclick={() => this.deletePersonHandler(index)}
                                key={person.id}
                                name={person.name}
                                count={person.count}/>
                    })
                    }
                    {/*<Person changed={this.nameChangedHandler.bind(this)}*/}
                            {/*name={this.state.person[0].name} count={this.state.person[0].count}/>*/}

                    {/*<Person myclick={this.swithNameHandler.bind(this,"阿斯蒂芬")} name={this.state.person[1].name} count={this.state.person[1].count}/>*/}
                    {/*<Person name={this.state.person[2].name} count={this.state.person[2].count}>*/}
                        {/*真的好呀*/}
                    {/*</Person>*/}
                </div>
            )
        }
    return(
      <div className="App">
        <h1>hello world</h1>
          <p>hi,react app</p>

        <button style={style} onClick={this.togglePersonHandle.bind(this)}>内容切换</button>
          {persons}
       </div>
    );
  }
}

export default App;