React实现简易评论发布功能

最新推荐文章于 2024-07-23 12:36:06 发布

问号制造商

最新推荐文章于 2024-07-23 12:36:06 发布

阅读量232

点赞数 1

分类专栏： React 文章标签：前端 Powered by 金山文档

本文链接：https://blog.csdn.net/sxp19980829/article/details/128666205

版权

React 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

知识点：

类组件的创建、渲染

条件渲染

列表渲染：使用map

解构赋值

input、textarea受控组件

import React from "react";
import  ReactDOM  from "react-dom";

class App extends React.Component{
    state={
        txt:'',
        content:'',
        commit:[
            {id:1,name:'wuhu',content:'hhh'},
            {id:2,name:'yoho',content:'xxx'}
        ],

    }
    // 条件渲染
    commitBoard=()=>{
        // /解构赋值
        // const {commit}=this.state
        // 条件渲染
        if(this.state.commit.length){
            // 列表渲染
            return (
                <ul>
                    {
                        this.state.commit.map(item=>
                            (<li key={item.id}>
                                <h2>评论人：{item.name}</h2>
                                <p>评论：{item.content}</p>
                            </li>)
                         )  
                    }
                </ul>
                
            )
        }
        return (
            <div>暂无数据</div>
        )
    }
    // 箭头函数解决this指向问题
    handleChange=(e)=>{
        const {name,value}=e.target
        this.setState({
            [name]:value
        })
        
    }
    handleClick=()=>{
        const {txt,content,commit}=this.state
        let commits=commit
        if(this.state.txt)
            commits.push({id:Math.random(),name:txt,content:content})
        else
            alert('请输入内容')
        this.setState({
            commit:commits,
            txt:'',
            content:''
        })
    }
    render(){
        const {txt,content}=this.state
        return(
            <div>
                <div>
                    <input type="text" name="txt" value={txt} onChange={this.handleChange}></input>
                </div>
                <div>
                    <textarea name="content" value={content} onChange={this.handleChange}></textarea>
                </div>
                <div>
                    <button onClick={this.handleClick}>发表评论</button>
                </div>
                <div>{this.commitBoard()}</div>
            </div>
        )
    }
}

ReactDOM.render(<App />,document.getElementById('root'))