react入门—09react留言本实例

墨蓝 2022-03-20 05:21 264阅读 0赞

### 1.原型 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 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.总结 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

## ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/d6a0ba58ba3b4d14863ff4dac043a238.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/16628560af724bf2b9bc9bf34563a8ae.png