javascript ReactJs - 事件处理程序和状态

Posted 2021-05-04

class App extends Component {
  state = {
    person:[
      {name:'Max', age: 28},
      {name:'Manu', age: 29},
      {name:'Stephanie', age: 26}
    ]
  }

  switchNameHandler = () => {
    console.log('Was clicked');

    this.setState({
      person:[
       {name:'Maximilian', age: 28},
       {name:'Manu', age: 29},
       {name:'Stephanie', age: 27}
     ]
   });
  }

  render() {
    //console.log(this.state.person[0]);
    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <Person name={this.state.person[0].name} age={this.state.person[0].age}/>
        <Person name={this.state.person[1].name} age={this.state.person[1].name}>My Hobbies: Racing </Person>
        <Person name={this.state.person[2].name} age={this.state.person[2].name}/>
        <button onClick={this.switchNameHandler}>Switch Name</button>
      </div>
    );
  }
}