1.index
import React from 'react'
import ReactDOM from 'react-dom'
import App from './components/app/app'
/*
1.划分组件
2.静态组件
3.交互组件
*/
ReactDOM.render(<App/>,document.getElementById('root'));
2.app
import React,{Component} from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
export default class App extends Component{
constructor(props){
super(props);
}
//初始化数据
state = {
comments:[
{username:'tom',content:'react is easy'},
{username:'mary',content:'java is easy'},
{username:'jack',content:'php is easy'},
]
};
//添加评论,传递给添加组件
addComment = (comment)=>{
const {comments} = this.state;
comments.unshift(comment);
this.setState({comments});
};
//删除指定评论
deleteComment = (index)=>{
const {comments} = this.state;
comments.splice(index,1);
this.setState({comments});
};
render(){
const {comments} = this.state;
return(
<div>
<header className="site-header jumbotron">
<div className="container">
<div className="row">
<div className="col-xs-12">
<h1>请发表对React的评论</h1>
</div>
</div>
</div>
</header>
<div className="container">
<CommentAdd addComment={this.addComment}/>
<CommentList comments={comments} deleteComment={this.deleteComment}/>
</div>
</div>
)
}
}
3.add
import React,{Component} from 'react'
import PropTypes from 'prop-types'
export default class CommentAdd extends Component{
static propTypes = {
addComment:PropTypes.func.isRequired
};
state = {
username:'',
content:''
};
//处理提交事件
handleSubmit = (e)=>{
//收集数据
const comment = this.state;
//更新状态
this.props.addComment(comment);
//清楚输入数据
this.setState({
username:'',
content:''
});
};
handleUsernameChange = (e)=>{
const username = e.target.value.trim();
this.setState({username})
};
handleContentChange = (e)=>{
const content = e.target.value.trim();
this.setState({content})
};
render(){
const {username,content} = this.state;
return(
<div className="col-md-4">
<form className="form-horizontal">
<div className="form-group">
<label>用户名</label>
<input type="text" className="form-control" placeholder="用户名" value={username} onChange={this.handleUsernameChange}/>
</div>
<div className="form-group">
<label>评论内容</label>
<textarea className="form-control" rows="6" placeholder="评论内容" value={content} onChange={this.handleContentChange}/>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button type="button" className="btn btn-default pull-right" onClick={this.handleSubmit}>提交</button>
</div>
</div>
</form>
</div>
)
}
}
4.list
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import './commentList.css'
import CommentItem from '../comment-item/comment-item'
export default class CommentList extends Component{
static propTypes = {
comments:PropTypes.array.isRequired,
deleteComment:PropTypes.func.isRequired
};
render(){
const {comments,deleteComment} = this.props;
const display = comments.length===0?'block':'none';
return(
<div className="col-md-8">
<h3 className="reply">评论回复:</h3>
<h2 style={{display}}>暂无评论,点击左侧添加评论!!!</h2>
<ul className="list-group">
{
comments.map((comment,index)=><CommentItem comment={comment} deleteComment={deleteComment} key={index} index={index}/>)
}
</ul>
</div>
)
}
}
5.item
import React,{Component} from 'react'
import PropTypes from 'prop-types'
import './commentItem.css'
export default class CommentItem extends Component{
static propTypes = {
comment:PropTypes.object.isRequired,
deleteComment:PropTypes.func.isRequired,
index:PropTypes.number.isRequired
};
handleDeleteClick = (e)=>{
const {comment,deleteComment,index} = this.props;
//提示
if(window.confirm(`确定删除${comment.username}的评论吗?`)){
deleteComment(index);
}
};
render(){
const {comment} = this.props;
return(
<li className="list-group-item">
<div className="handle">
<a href="javascript:;" onClick={this.handleDeleteClick}>删除</a>
</div>
<p className="user"><span>{comment.username}</span><span>说:</span></p>
<p className="centence">{comment.content}</p>
</li>
)
}
}