初学react（八）循环

import React from 'react';
import './App.css';
import Persion from './Persion/Persion';
class App extends React.Component {
  /**
   * state： 用于改变组件内状态的值（动态）
   * props： 用于组件通信传值
   */
  state = {
   persions: [
     {
       id:1,
       name: '渣渣辉',
       count: '30'
     },
     {
        id: 2,
        name: 'aaa',
        count: '20'
      },
      {
        id: 3,
        name: 'bbb',
        count: '10'
      },
      {
        id: 4,
        name: 'ccc',
        count: '5'
      }
   ],
   otherState: 'anything',
   showPersion:false
  }
  // 函数直接定义在于render同级别，因为class类下,用this.函数名来访问
  switchNameHandLer = ( newName ) => {
    console.log("hello")
    // es6中this执行为当前类
    //this.state.persions[0].name = '渣渣渣渣辉' //不要直接去更改state Use setState()
    this.setState({
      persions: [
        {
          id:1,
          name: newName,
          count: '3000'
        },
        {
          id: 2,
          name: 'aaa',
          count: '20'
        },
        {
          id: 3,
          name: 'bbb',
          count: '10'
        },
        {
          id: 4,
          name: 'ccc',
          count: '5'
        }
      ]
    })
  }  
  nameChangedHandLer = (event, id) => {
    console.log(event.target, id)
    const persionIndex = this.state.persions.findIndex( p => {
      return p.id === id;
    })
    const persion = {
      ...this.state.persions[persionIndex]
    }
    persion.name = event.target.value;
    const persions = [...this.state.persions];
    persions[persionIndex] = persion;
    this.setState({
      persions
    })
  }
  togglePersonHandle = () =>{
    this.setState({
      showPersion: !this.state.showPersion
    })
  }
  deletePersonHandler = (persionIndex) =>{
    console.log(111)
    // const persions = this.state.persions;
    const persions = [...this.state.persions]
    persions.splice(persionIndex, 1);
    this.setState({
      persions
    })
  }
  render () {
    const style = {
      backgroundColor: 'red',
      border: '1px solid blue'
    }
    let persions = null;
    if (this.state.showPersion) {
      persions = (<div>
        {
          this.state.persions.map((persion, index) => {
            return <Persion
              changed={(event) => this.nameChangedHandLer(event, persion.id)}
              myclick={() => this.deletePersonHandler(index)}
              name={persion.name} 
              count={persion.count}
              key={index}
              />
          })
        }
        {/* <Persion
          name={this.state.persions[0].name}
          count={this.state.persions[0].count}
          changed={this.nameChangedHandLer}
        />
        <Persion
          name={this.state.persions[1].name}
          myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
          count={this.state.persions[1].count} />
        <Persion name={this.state.persions[2].name}
          count={this.state.persions[2].count} />
        <Persion name={this.state.persions[3].name}
          count={this.state.persions[3].count}>
          <a href='http://www.baidu.com'>非常感谢大家的支持</a>
        </Persion> */}
      </div>)
    }
    return (
      <div className="App">
        hello world
        {/* 函数不能加括号，加括号就直接执行了,使用箭头函数可以实现参数的传递 */}
        {/* <button onClick={() => this.switchNameHandLer('古天乐')}>更改状态值</button> */}
        {/* 第二种方式  bind 传递 （建议） */}
        {/* <button style={style} onClick={this.switchNameHandLer.bind(this, '古天乐')}>更改状态值</button> */}
        <button style={style} onClick={this.togglePersonHandle}>内容切换</button>
        {persions}
        {/* { this.state.showPersion ? 
          <div>
            <Persion
              name={this.state.persions[0].name}
              count={this.state.persions[0].count}
              changed={this.nameChangedHandLer}
            />
            <Persion
              name={this.state.persions[1].name}
              myclick={this.switchNameHandLer.bind(this, '渣渣辉2')}
              count={this.state.persions[1].count} />
            <Persion name={this.state.persions[2].name}
              count={this.state.persions[2].count} />
            <Persion name={this.state.persions[3].name}
              count={this.state.persions[3].count}>
              <a href='http://www.baidu.com'>非常感谢大家的支持</a>
            </Persion>
          </div> : null
        } */}
        
      </div>
    );
  }
}
export default  App;