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

爱明依

发布于 2019-04-27 20:55:57

5720

发布于 2019-04-27 20:55:57

文章被收录于专栏：爱明依爱明依

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、效果查看：