關於 React 小書:React 評論功能(四):localStorage、命名與方法擺放順序


Posted by YongChenSu on 2020-12-09

實作的程式碼

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 開頭的類屬性,defaultPropspropTypes
  2. 構造函數,constructor
  3. getter/setter。
  4. component lifecycle。
  5. _ 開頭的私有方法。
  6. 事件監聽方法,handle
  7. render 開頭的方法,有時 render() 方法裡面的內容會分開到不同函數裡進行,這些函數都已 render 開頭。
  8. render() 方法。

參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書 #naming conventions







Related Posts

【Day06】Vue-cli & Vuex mapState

【Day06】Vue-cli & Vuex mapState

Golang-Advance- GO routine

Golang-Advance- GO routine

Day 18-Turtle Graph & Dot painting

Day 18-Turtle Graph & Dot painting


Comments