Js—react 評論頁面

1、把頁面拆分組件
能夠拆分爲4個組件，組件文件的後綴名能夠是js，也能夠是jsx格式。
入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app/app';

ReactDOM.render(<App/>, document.getElementById('root'))
應用組件app.js
import React from 'react'
import CommentAdd from '../comment-add/comment-add'
import CommentList from '../comment-list/comment-list'
class App extends React.Component {
constructor (props) {

super(props)

this.state = {
  comments: []
}
function(){ //外匯代理 http://www.kaifx.cn/ib/

this.delete = this.delete.bind(this)

}

componentDidMount () {

//模擬異步獲取數據
setTimeout(() => {
  const comments = [
    {
      username: "Tom",
      content: "ReactJS好難啊!",
      id: Date.now()
    },
    {
      username: "JACK",
      content: "ReactJS還不錯!",
      id: Date.now() + 1
    }
  ]
  this.setState({
    comments:comments
  })
}, 1000)

}

//用箭頭函數就不須要bind綁定組件的this
add = (comment) => {

let comments = this.state.comments
comments.unshift(comment)
this.setState({ comments })

}

delete (index) {

let comments = this.state.comments
comments.splice(index, 1)
this.setState({ comments })

}

render () {

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 add={this.add}/>
      <CommentList comments={this.state.comments} delete={this.delete}/>
    </div>
  </div>
)

}
}

export default App
添加評論表單組件comment-add.jsx
import React from 'react'
import PropTypes from 'prop-types'

class CommentAdd extends React.Component {
constructor (props) {

super(props)
this.state = {
  username: '',
  content: ''
}
this.addComment = this.addComment.bind(this)
this.changeUsername = this.changeUsername.bind(this)
this.changeContent = this.changeContent.bind(this)

}

addComment () {

// 根據輸入的數據建立評論對象
let { username, content } = this.state
let comment = { username, content }
// 添加到comments中, 更新state
this.props.add(comment)
// 清除輸入的數據
this.setState({
  username: '',
  content: ''
})

}

changeUsername (event) {

this.setState({
  username: event.target.value
})

}

changeContent (event) {

this.setState({
  content: event.target.value
})

}
render () {

return (
  <div className="col-md-4">
    <form className="form-horizontal">
      <div className="form-group">
        <label>用戶名</label>
        <input type="text" className="form-control" placeholder="用戶名"
               value={this.state.username} onChange={this.changeUsername}/>
      </div>
      <div className="form-group">
        <label>評論內容</label>
        <textarea className="form-control" rows="6" placeholder="評論內容"
                  value={this.state.content} onChange={this.changeContent}></textarea>
      </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.addComment}>提交</button>
        </div>
      </div>
    </form>
  </div>
)

}
}
CommentAdd.propTypes = {
add: PropTypes.func.isRequired
}

export default CommentAdd
評論列表組件comment-list.jsx
import React from 'react'
import PropTypes from 'prop-types'
import CommentItem from '../comment-item/comment-item'
import './commentList.css'

class CommentList extends React.Component {
constructor (props) {

super(props)

}

render () {

let comments = this.props.comments
let display = comments.length > 0 ? 'none' : 'block'
return (
  <div className="col-md-8">
    <h3 className="reply">評論回覆：</h3>
    <h2 style={{ display: display }}>暫無評論，點擊左側添加評論！！！</h2>
    <ul className="list-group">
      {
        comments.map((comment, index) => {
          console.log(comment)
          return <CommentItem comment={comment} key={index} index={index} delete={this.props.delete}/>
        })
      }
    </ul>
  </div>
)

}
}
CommentList.propTypes = {
comments: PropTypes.array.isRequired,
delete: PropTypes.func.isRequired
}

export default CommentList
評論列表的item組件comment-item.jsx
import React from 'react'
import PropTypes from 'prop-types'
import './commentItem.css'

class CommentItem extends React.Component {
constructor (props) {

super(props)
this.deleteComment = this.deleteComment.bind(this)

}

deleteComment () {

let username = this.props.comment.username
if (window.confirm(`肯定刪除${username}的評論嗎?`)) {
  this.props.delete(this.props.index)
}

}

render () {

let comment = this.props.comment
return (
  <li className="list-group-item">
    <div className="handle">
      <a href="javascript:" onClick={this.deleteComment}>刪除</a>
    </div>
    <p className="user"><span >{comment.username}</span><span>說:</span></p>
    <p className="centence">{comment.content}</p>
  </li>
)

}
}
CommentItem.propTypes = {
comment: PropTypes.object.isRequired,
index: PropTypes.number.isRequired,
delete: PropTypes.func.isRequired
}

export default CommentItem若是沒有prop-types 須要安裝，通常react腳手架默認就安裝了。npm install --save prop-types