react简易聊天板

该案例实现如下的功能:

1 没有聊天记录时展示如下

2 有聊天记录时展示如下

3 输入网名和聊天内容点击发送按钮, 聊天信息展示在聊天板上

4 校验名字和内容没填写不能发送

扫描二维码关注公众号，回复： 14377614 查看本文章

代码如下

import React from "react";
import ReactDOM from "react-dom";
import "./index.css"

class App extends React.Component {

    state = {
        // 初始聊天记录
        comments: [
            {
                id: 1,
                name: '黄老大',
                say: 'hello girl'
            },
            {
                id: 2,
                name: '李小二',
                say: '明天会更好'
            },
            {
                id: 3,
                name: '老板',
                say: '听我的没错'
            }
        ],
        //网友姓名
        userName: '',
        //网友说
        userSay: ""

    }

// 渲染聊天内容
    returnList() {

        return this.state.comments.length === 0
            ? (<p id='start'>静悄悄的,还没有人说话</p>)
            : (<ul>
                {this.state.comments.map(
                    item => (
                        <li key={item.id}>
                            <h3>网友:{item.name} </h3>
                            <p>说:{item.say}</p>
                        </li>
                    )
                )}
            </ul>)

    }

// state绑定表单
    fn = e => {
        const target = e.target;
        const name = target.name;
        this.setState({
                [name]: target.value
            }
        )
    }

//新增聊天
    add = e => {
        //新增聊天非空校验
        const userName = this.state.userName;
        const userSay = this.state.userSay;
        if(userName.trim()===''||userSay.trim()===''){
            alert('请输入名字和内容');
            return;
        }

        const newcomments = [{
            //新的聊天加在原来数组的第一位
            id: Math.random(),
            name: userName,
            say: userSay
        }, ...this.state.comments]

        this.setState({
                comments: newcomments,
                // 发表新的聊天之后清空文本的内容
                userName: '',
                userSay: ''
            }
        )
    }

    render() {
        return (
            <div id='wrap'>
                <div>
                    <input id='who' name='userName' type='text' value={this.state.userName} placeholder='请输入网名'
                           onChange={this.fn}></input>
                    <br/>
                    <textarea id='box' name='userSay' value={this.state.userSay} rows='10' placeholder='请输入聊天内容'
                              onChange={this.fn}/>
                    <br/>
                    <button onClick={this.add}>发送</button>
                </div>
                <div id='show'>

                    {/*通过条件决定渲染什么内容*/}
                    {this.returnList()}

                </div>
            </div>


        )
    }

}

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

猜你喜欢