本教程內容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新。

使用TextInput

接下來，我們將使用TextInput作為todo的輸入框，將todo item加到todo list里。

首先，思考一下我們要怎么對數(shù)據(jù)進行管理。對于整個app來說，我們需要有2個狀態(tài)(state)值，一個用于存儲當前正在輸入的todo，一個用于存儲所有的todo item，這2個狀態(tài)在app初始狀態(tài)的時候，都是空的（對于todo list值來說，后面我們需要導入之前持久存儲的數(shù)據(jù)，這個我們后面再講），當我們在TextInput中輸入字符的時候，會更新當前正在輸入的todo value；當我們按下鍵盤上的"done"按鈕的時候，會將這個todo value增加到todo list里，同時將這個value清空。

2個state

1. value: 存儲當前正在輸入的todo，TextInput onChangeText事件會更新這個狀態(tài)
2. items: 存儲所有todo list，TextInput onSubmitEditing事件會更新這個狀態(tài)，同時將value狀態(tài)設置為空。

header.js

TextInput是需要放在Header里面的，以下是header.js的新代碼：

// 引入React和Component
import React, {Component} from "react";
// 引入Text，顯示文字
import {View, Text, StyleSheet, TextInput} from "react-native";

// 定義Header類，這個類是Component的子類
class Header extends Component {
  /*
   實現(xiàn)Header類的render方法，這個方法返回一個View，顯示Footer
   */
  render() {
    return (
      <View style={styles.header}>
        <TextInput
          placeholder="什么需要做?"
          value={this.props.value}
          onChangeText={this.props.onChange}
          onSubmitEditing={this.props.onAddItem}
          blurOnSubmit={false}
          returnKeyType="done"
          style={styles.input}
        />
      </View>
    );
  }
}

// 創(chuàng)建StyleSheet
const styles = StyleSheet.create({
  header: {
    paddingHorizontal: 16,
    flexDirection: "row",
    justifyContent: "space-around",
    alignItems: "center"
  },
  input: {
    flex: 1,
    height: 50
  }
});

// 導出這個模塊，供外部調用
export default Header;

我們可以看到，我們在Header是創(chuàng)建了一個TextInput，并且把值和處理方法都放在Header的props中傳給了這個TextInput，也就是意味著我們不需要在Header中寫代碼來處理app的邏輯，這部分代碼我們統(tǒng)一放在app.js里來做。

我們對Header傳了三個props:

1. value，是一個值，就是app用于存儲當前正在輸入的todo value
2. onChange，一個回調函數(shù)，用于TextInput onChangeText的時候，更新app.state.value
3. onAddItem，一個回調函數(shù)，當TextInput onSubmitEditing（提交）的時候，更新app.state.items，并將app.state.value設置為空。

接下來我們在app.js里實現(xiàn)這部分代碼。

初始化state

在App類的構造方法里，初始化state

  // 構造方法,初始化state
  constructor(props) {
    super(props);
    // 初始化2個狀態(tài)
    this.state = {
      value: "",
      items: []
    };
  }

TextInput onSubmitEditing回調函數(shù)

  /*
   傳給Header.TextInput.onSubmitEditing的回調函數(shù)
   更新this.state.items
   設置this.state.value為空
   */
  handleAddItem() {
    if (!this.state.value) return;
    // 創(chuàng)建一個新的items,從this.state.items里copy現(xiàn)有的數(shù)據(jù),再增加一個新的
    const newItems = [
      ...this.state.items,
      {
        key: Date.now(),
        text: this.state.value,
        complete: false
      }
    ];
    // 更新state
    this.setState({
      items: newItems,
      value: ""
    });
  }

我并沒有直接往this.state.items里增加一條新數(shù)據(jù)，而是重新創(chuàng)建了一個新的items，從老的items里copy了原有數(shù)據(jù)，并且增加了一條新數(shù)據(jù)。這樣做的好處是讓react native的shouldComponentUpdate性能更好，從而更加快速的知道一個組件是否有狀態(tài)變化，從而重新render數(shù)據(jù)。詳情參考：https://facebook.github.io/react/docs/optimizing-performance.html

傳值給Header props

接下來就是給Header props傳值了

  <Header
    value = {this.state.value}
    onAddItem = {this.handleAddItem.bind(this)}
    onChange = {(value) => this.setState({value})}
  />

運行結果如下：

當然，現(xiàn)在按下Done增加一個新的todo，我們的app沒有任何變化，我們將在下一篇中講解如果顯示todo list。

本節(jié)代碼：https://github.com/zhiwehu/todo/tree/second

1. React Native實戰(zhàn)開發(fā)1：搭建開發(fā)環(huán)境
2. React Native實戰(zhàn)開發(fā)2：布局
3. React Native實戰(zhàn)開發(fā)3：模塊劃分
4. React Native實戰(zhàn)開發(fā)4：屬性和狀態(tài)
5. React Native實戰(zhàn)開發(fā)5：使用TextInput
6. React Native實戰(zhàn)開發(fā)6：使用ListView
7. React Native實戰(zhàn)開發(fā)7：使用Switch更新todo complete狀態(tài)
8. React Native實戰(zhàn)開發(fā)8: 刪除todo item