React 学习：综合实例-留言本

叁歲伎倆 2022-02-19 11:19 309阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70][]

1、评论列表CommentList.js

重点掌握遍历循环数组的方式

import React from  'react'
    
    
    const CommentList=({ comments }) => {
        return (
            <div className="comment-list-component">
                <label>评论列表</label>
                <ul>
                    {
                        comments.map((comment,index) =>
                            <li key={index} className="list-group-item" >{comment}</li>
                        )
                     }
                </ul>
            </div>
        )
    }
    
    // class CommentList extends React.Component{
    //
    //
    // }
    export default CommentList

2、评论输入框的改造CommentBox.js

重点掌握：函数绑定bind(this)  输入框值域获取ref

构造器参数props 既可以绑定数组 还可以绑定函数

import React from 'react'
    
    class CommentBox extends React.Component{
    
        constructor(props){
            super(props);
            // this.state={
            //     value:''
            // }
            // this.handlerChange=this.handlerChange.bind(this)
            this.handlerSubmit=this.handlerSubmit.bind(this)
        }
        // handlerChange(event){
        //     this.setState({
        //         value:event.target.value
        //     })
        // }
        handlerSubmit(event){
            // alert(this.textInput.value)
            this.props.onAddComment(this.textInput.value)
            event.preventDefault()
        }
        render(){
            return (
                <form className="p-5" onSubmit={this.handlerSubmit}>
                    <div className="form-group">
                        <label>留言内容</label>
                        <input type="text" className="form-control" placeholder="请输入内容" ref={(textInput)=>{this.textInput=textInput}}/>
                    </div>
                    <button type="submit" className="btn btn-primary">留言</button>
                    <p>已有{this.props.commentsLength}条评论</p>
                </form>
            )
        }
    }
    
    export default CommentBox

3、App.js 里引用使用

重点掌握：动态改变class里 state 的数据。语法掌握... this.state.comments,comment

import React, { Component } from 'react';
    import logo from './logo.svg';
    import './App.css';
    import NameCard from './components/NameCard';
    import LikesButton from './components/LikeButton';
    import DigitalClock from './components/DigitalClock';
    import CommentList from './components/CommentList'
    import CommentBox from './components/CommentBox';
      const tags=['男神']
    class App extends Component {
        constructor(props){
            super(props)
            this.state={
                comments:['this is my first reply']
            }
            this.addComment=this.addComment.bind(this)
        }
        addComment(comment){
            this.setState({
               comments:[...this.state.comments,comment]
            })
        }
    
      render() {
            const {comments}=this.state
        return (
          <div className="App">
             <div className={"App-header"}>
                 <img src={logo} className={"App-logo"} alt={"logo"}/>
                 <h2>欢迎来到矿洞程序员</h2>
                 <NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />
                 <LikesButton/>
                 <DigitalClock/>
                 <CommentList comments={ comments }/>
                 <CommentBox
                     commentsLength={ comments.length}
                     onAddComment={this.addComment}
                 />
              </div>
             </div>
        );
      }
      }
    
    export default App;

4、效果查看：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70]: /images/20220219/48a704dd5c0e4955926b6f853a55c8fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDIzODQ1_size_16_color_FFFFFF_t_70 1]: /images/20220219/d7d54fbfb3d5495eb775eeaa2a252491.png