react入门—09react留言本实例

1.原型

 

2.代码

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
/* import NameCard from './components/NameCard';
import LikesButton from './components/LikesButton';
import DigitalClock from './components/DigitalClock'; */
import CommentBox1 from './components/CommentBox1';
/* import CommentBox from './components/CommentBox'; */
import CommentList from './components/CommentList';
// 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">
         <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </header>
{/*         <LikesButton tags={tags} />
 */}        {/* <NameCard name="viking" number={1233444} isHuman tags={tags}/> */}
        {/* <DigitalClock /> */}
        <CommentList comments={comments}/>
        <CommentBox1 
          commentsLength={comments.length} 
          onAddComment={this.addComment}
          />
      </div>
    )
  }
}

export default App;

CommentBox1.js

import React from 'react'

class CommentBox1 extends React.Component{
    constructor(props){
        super(props)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleSubmit(event){
        this.props.onAddComment(this.textInput.value)
        event.preventDefault()

    }
    render(){
        return (
            <form className="p-5" onSubmit={this.handleSubmit}>
                <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 CommentBox1

CommentList.js

import React from 'react'

const CommentList = ({comments}) =>{
    return(
        <div className="comment-list-component">
            <label>评论列表</label>
            <ul className="list-group mb-3">
                {
                    comments.map((comment, index)=>
                        <li key={index} className="list-group-item">{comment}</li>
                    )
                }
            
            ></ul>
        </div>
    )
}
export default CommentList

 

3.总结