React遍历

这种写法很巧妙，值得借鉴

//Person.js
import React from 'react';

import './Person.css';

const style = {
    backgroundColor: '#e0dede',
    margin: "10px 25%",
    
}
const Person =( props ) => {
    return <p style={style}>
            { props.name }<br/><br/>
            { props.age }<br/><br/>
            <input type="text" placeholder="改变年龄"
             onChange={props.changeAge} /><br/><br/></p>
            
}

export default Person;

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

class App extends Component {
  state = {
    user:[{id:1,name:"张三",age: "21"},
          {id:2,name:"李四",age: "22"},
          {id:3,name:"王二麻子",age: "23"}],
    showhide: false,
  }

  toggle = () =>{
    this.setState({
      showhide: !this.state.showhide
    });
  }

  changeAge = (event,id) =>{
    const personIndex = this.state.user.findIndex(p=> {//取出应该被修改的那个人的数据findIndex-寻找下标
      return id===p.id
    })
    const person = {...this.state.user[personIndex]};//取到要修改的那条
    person.age = event.target.value;//修改数据
    const persons = [...this.state.user];
    persons[personIndex] = person;
    this.setState({
      user: persons
    });
  }

 
  render() {
    let person = null;
    if( this.state.showhide ){
      person = (
        <div>

          {
            this.state.user.map((person,index) => {
              return <Person
                name={person.name}
                age={person.age}
                key={person.id}
                changeAge={(event)=>this.changeAge(event,person.id)}>
              </Person>
            })

          }
         
        </div>
      )
    }

    return (
      <div className="App">
        <button onClick={this.toggle}>切换</button>
        {person}
      </div>
    );
  }
}

export default App;