04.React组件基础案例

标签：list()   文本   步骤   turn   math   处理   组件   发表   target   

案例：需求分析

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>
           
        )
    }
}

04.React组件基础案例

标签：list()   文本   步骤   turn   math   处理   组件   发表   target   

原文地址：https://www.cnblogs.com/foreverLuckyStar/p/12241717.html