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