關於 React 小書：React 評論功能（四）：localStorage、命名與方法擺放順序

實作的程式碼

import React, { Component } from 'react'
import PropTypes from 'prop-types'

class CommentInput extends Component {
  // 初始化並保存狀態，而目前是空值，而輸入框有設置 value
  static propTypes = {
    onSubmit: PropTypes.func
  }

  constructor() {
    super()
    this.state = {
      username: '',
      content: ''
    }
  }

  componentDidMount() {
    this.textarea.focus()
  }

  componentWillMount() {
    this._loadUsername()
  }

  _loadUsername () {
    const username = localStorage.getItem('username')
    if (username) {
      this.setState({ username })
    }
  }

  _saveUsername (username) {
    localStorage.setItem('username', username)
  }

  handleUsernameBlur (event) {
    this._saveUsername(event.target.value)
  }

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

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

  handleSubmit () {
    if (this.props.onSubmit) {
      const { username, content } = this.state
      this.props.onSubmit({username, content})
    }
    this.setState({ content: '' })
  }

  render () {
    return (
      <div className='comment-input'>
        <div className='comment-field'>
          <span className='comment-field-name'>使用者名稱：</span>
          <div className='comment-field-input'>
          <input
            value={this.state.username}
            onBlur={this.handleUsernameBlur.bind(this)}
            onChange={this.handleUsernameChange.bind(this)} />
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>評論內容：</span>
          <div className='comment-field-input'>
          <textarea
            ref={(textarea) => this.textarea = textarea}
            value={this.state.content}
            onChange={this.handleContentChange.bind(this)} />
          </div>
        </div>
        <div className='comment-field-button'>
          <button onClick={this.handleSubmit.bind(this)}>發布</button>
        </div>
      </div>
    )
  }
}

export default CommentInput

Component 命名與方法擺放順序

命名

1. 私有方法以 _ 開頭
2. 事件監聽以 handle 開頭
3. 把事件監聽方法傳給 component，屬性名以 on 開頭

   <CommentInput
   onSubmit={this.handleSubmitComment.bind(this)} />
   

方法擺放順序

1. static 開頭的類屬性，defaultProps、propTypes。
2. 構造函數，constructor。
3. getter/setter。
4. component lifecycle。
5. _ 開頭的私有方法。
6. 事件監聽方法，handle。
7. render 開頭的方法，有時 render() 方法裡面的內容會分開到不同函數裡進行，這些函數都已 render 開頭。
8. render() 方法。
   
   

參考資源

• 实战分析：评论功能（四）