React+webpack從0到1開發一個todoMvc（三）

todoMvc-3step原始碼 todoMvc-3step演示 上一張主要介紹了下React如何進行雙向繫結以及如何生成一個元件，我們第三步的目標就是需要把之前做的內容抽象出更細的元件，這樣便於解耦，各個元件各司其職，互不干擾。 先看下抽象後src/components下的目錄

先看下我們的app.js修改過後的內容： import React from 'react' import ReactDOM from 'react-dom' import TodoHeader from './TodoHeader' // 引入TodoHeader元件 import TodoMain from './TodoMain' // 引入TodoMain元件

class App extends React.Component { // 定義元件，繼承父類
  constructor() {
    super()
    this.state = {
      todos: []
    }
  }
  addTodo(item) { // 新增了新增todo事項的方法
    this.state.todos.push(item)
    this.setState({todos: this.state.todos});  //設定狀態
  }
  render(){
    return (
      <div className="todo-wrapper">
        // 將原內容寫在元件中並引入進行渲染
        // 把addTodo方法傳遞到TodoHeader元件中，bind(this)是為了把該React例項繫結到this上
        <TodoHeader addTodo={this.addTodo.bind(this)}/>
        // 把 state.todos 傳入到TodoMain 中
        <TodoMain todos={this.state.todos}/>
      </div>
    )
  }
}

ReactDOM.render(<App/>,document.getElementById('app'))
複製程式碼

TodoHeader: import React from 'react'

class TodoHeader extends React.Component {
  // 繫結鍵盤迴車事件，新增新任務
  handlerKeyUp(e) {
    if(e.keyCode == 13) { // enter鍵的 keyCode 為13
      let value = e.target.value;
      if(!value) return false;
      let newTodoItem = {
        text: value,
        isDone: false
      };
      e.target.value = '';
      this.props.addTodo(newTodoItem) // 通過 this.props 來呼叫父元件傳遞過來的addTodo方法
    }
  }
  render(){
    return (
        <div className="todo-header">
          <input onKeyUp={this.handlerKeyUp.bind(this)} type="text" placeholder="請輸入你的任務名稱，按Enter鍵確認"/>
        </div>
    )
  }
}
export default TodoHeader // 將TodoHeader匯出，否則父元件無法匯入
複製程式碼

TodoMain修改後內容: import React from 'react' import TodoItem from './TodoItem'

class TodoMain extends React.Component {
  render(){
    if(this.props.todos.length == 0) {
      return (
        <div className="todo-empty">恭喜您，目前沒有待辦任務</div>
      )
    } else {
      return (
        <ul className="todo-main">
          {
            this.props.todos.map((todo,index) => {
              //{...this.props} 用來傳遞TodoMain的todos屬性和delete、change方法。
              return <TodoItem text={todo.text} isDone={todo.isDone} index={index} {...this.props} key={index}/>
            })
          }
        </ul>
      )
    }
  }
}
export default TodoMain
複製程式碼

TodoItem： import React from 'react'

class TodoItem extends React.Component {
  render() {
    let className = this.props.isDone?'task-done':''
    return (
      <li>
        <label>
          <input type="checkbox"/>
          <span className={className}>{this.props.text}</span>
        </label>
      </li>
    )
  }
}

export default TodoItem
複製程式碼

這一步時webpack先編譯,然後開啟index.html，如果頁面像下圖這樣的odoMvc-3step演示，那就說明成功了。

做到這裡應該對react元件元件化的有個大概的瞭解了。新手們基本可以對著原始碼按照這種思路繼續做下去。以完善【刪除】、【清除已完成】、【未完成數量】等功能了，由於程式碼類似，故不做贅述了，不太清楚的地方可以參考原始碼。

React+webpack從0到1開發一個todoMvc（一） React+webpack從0到1開發一個todoMvc（二）  React+webpack從0到1開發一個todoMvc（四）  React+webpack從0到1開發一個todoMvc（五）