react初体验

import React, { Component } from "react";

class App extends Component {
 constructor() {
   super();
   this.state = {
     list: [
       { id: 1, user: "Biger1", content: "learn react" },
       { id: 2, user: "Biger2", content: "learn redux" }
     ],
     iptUser: "",
     iptContent: ""
   };
 }

 // 添加留言
 addmsg() {
   const { list, iptUser, iptContent } = this.state;
   if (!iptUser || !iptContent) {
     return;
   }
   const arr = [...list];
   arr.push({
     id: arr.length ? arr[arr.length - 1].id + 1 : 0,
     user: iptUser,
     content: iptContent
   });
   this.setState({
     list: arr,
     iptUser: "",
     iptContent: ""
   });
 }

 // 删除留言
 delmsg(val) {
   const { list } = this.state;
   const arr = list.filter(v => {
     return v.id !== val.id;
   });
   this.setState({
     list: arr
   });
 }

 // 控制用户输入
 handleInput(ev) {
   this.setState({
     [ev.target.name]: ev.target.value
   });
 }
 // 界面渲染
 render() {
   const { list, iptUser, iptContent } = this.state;
   return (
     

       
留言列表
       
       

        {
           this.handleInput(ev);
         }}
       />
       

       添加
       

         {list.map(val => {
           return (
             

               

                 {val.user}：{val.content}
               
               删除
             
           );
         })}
       
     
   );
 }
}

export default App;