04.React组件基础案例

Posted 2020-11-25 foreverluckystar

案例：需求分析

1.渲染评论列表（列表渲染）
2.没有评论数据时渲染：暂无评论（条件渲染）
3.获取评论信息，包括评论人和评论内容（受控组件）
4.发表评论，更新评论列表（setState())

案例：实现步骤

1.渲染评论列表

1.在state 中初始化评论列表数据
2.使用数组的map方法遍历state中的列表数据
3.给每个被遍历的li元素添加key属性

2.渲染暂无评论

1.判断列表数据的长度是否为0
2.如果为0,则渲染暂无评论

3.获取评论信息

1.使用受控组件的方式处理表单元素

4.发表评论

1.给按钮绑定单机事件
2.在事件处理程序中，通过state获取评论信息
3.将评论信息添加到state中，并调用setState()方法更新state
4.边界情况：清???文本框
5.边界情况：非空判断

完整代码

class App extends React.Component{
    //初始化状态
   state={
       components:[
        {id:1,name:'jack',content:'沙发！！！'},
        {id:2,name:'rose',content:'板凳'},
        {id:3,name:'tom',content:'楼主好人'}
       ],
       //评论人
       userName:'',
       //评论内容
       userContent:''

   }
   //渲染评论列表
   renderList(){
       const {components} = this.state
       if(components.length === 0){
           return <div className="no-comment">暂无评论，快去评论吧</div>
       }
       return(
            <ul>
                {components.map(item=>(
                     <li key={item.id}>
                         <h3>评论人：{item.name}</h3>
                         <p>评论内容：{item.content}</p>
                     </li>
                ))}
                   
             </ul>
       )
   }
   //处理表单元素值
   handleFrom = e =>{
       const {name,value} = e.target
       this.setState({
           [name]:value
       })
   }
   //发表评论
   addComment = () =>{
       const {components,userName,userContent} = this.state

       //非空校验
       if(userName.trim() ===''|| userContent.trim() ===''){
           alert('请输入评论人和评论内容')
           return
       }
       const newComponents = [{
           id:Math.random(),
           name:userName,
           content:userContent
       },...components]

       //文本框的值如何清空？要清空文本框只需要将其对应的state清空即可
       this.setState({
        components:newComponents,
        userName:'',
        userContent:''
       })

   }
    render(){
        const {userName,userContent} = this.state
        return(
            <div className="app">
               <div>
                   <input value={userName} className="user" type="text" placeholder="请输入评论人" name="userName" onChange={this.handleFrom}/>
                   <br/>
                   <textarea value={userContent} className="content" cols="30" rows="10" placeholder="请输入评论内容" name="userContent" onChange={this.handleFrom}></textarea>
                   <br/>
                   <button onClick={this.addComment}>发表评论</button>
               </div>
               {/* 通过条件渲染决定渲染什么内容 */}
               {this.renderList()}  
            </div>
           
        )
    }
}