react 表单 demo 代码练习

Posted 2021-12-23 冰雪奇缘lb

敲个demo：

• state、事件、表单的综合运用
• 事件的复用封装
• 对象属性的灵活取值 [属性（变量）]
• 解构赋值的使用
• 扩展运算符的使用
  

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

import './index.css'
// 抽离组件到独立的 JS 文件中

class App extends React.Component 
    state = 
        comments: [
             id: 1, name: '王晓曦', content: '不错哟！！！' ,
             id: 2, name: '李菲', content: '太棒啦！！！' ,
             id: 3, name: '王萌', content: '还行吧！！！' 
        ],

        // 评论人
        userName: '',
        userContent: ''
    
    
    // 渲染评论列表
    renderList() 
        const comments = this.state
        if(comments.length === 0) 
            return (
                <div>暂无评论，快去评论吧~</div>
            ) 
         else 
            return (<ul>
                
                    comments.map(item => (
                        <li key = item.id>
                            <h3>评论人：item.name</h3>
                            <p>评论内容：item.content</p>
                        </li>
                    ))
                
            </ul>)
        
    

    // 处理表单元素值
    handleForm = e => 
        const name, value = e.target
        this.setState(
            [name]: value
        )
    

    // 发表评论
    addcomment = () => 
        const comments, userName, userContent = this.state

        // 分控校验
        if(userName.trim() === '' || userContent.trim() === '') 
            alert('请输入评论人和评论内容')
            return
        
        // 将评论信息添加到state中
        const newComments = [
            id: Math.random, name: userName, content: userContent, 
            ...comments
        ]
        // 更新内容列表，发布后输入框清空
        this.setState(
            comments: newComments,
            userName: '',
            userContent: ''
        )
    

    render() 
        const  userName, userContent  = this.state
        return (
            <div className="box">
                <input 
                    value=userName 
                    name="userName" 
                    onChange=this.handleForm
                />
                <textarea 
                    value=userContent 
                    name="userContent" 
                    onChange=this.handleForm
                />
                <button onClick=this.addcomment>发表评论</button>
                
                
                
                <div className="plBox">
                    
                        this.renderList()
                    
                  
                </div>
            </div>
        )
    

// 渲染组件
ReactDOM.render(<App />, document.getElementById("root"))

textarea, input, button 
  display: block;
  margin: 10px 0;


input 
  width: 100%;
  height: 25px;


textarea 
  width: 100%;
  height: 200px;


.box 
  border: 1px solid;
  padding: 15px;
  width: 400px;
  height: 800px;
  margin: 20px;


button 
  float: right;


.plBox 
  clear: both;