react入门—09react留言本实例

1.原型

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 (
      
logo
{/* */} {/* */} {/* */}
) } } 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 (
            
{this.textInput = textInput}} />

已有{this.props.commentsLength}条评论

) } } export default CommentBox1

CommentList.js

import React from 'react'

const CommentList = ({comments}) =>{
    return(
        
    { comments.map((comment, index)=>
  • {comment}
  • ) } >
) } export default CommentList

 

3.总结

react入门—09react留言本实例_第2张图片

 

你可能感兴趣的:(React入门)