本教程內(nèi)容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新洋丐。
使用TextInput
接下來吊圾，我們將使用TextInput作為todo的輸入框，將todo item加到todo list里挂绰。
首先屎篱，思考一下我們要怎么對數(shù)據(jù)進行管理。對于整個app來說葵蒂，我們需要有2個狀態(tài)(state)值交播，一個用于存儲當(dāng)前正在輸入的todo，一個用于存儲所有的todo item践付，這2個狀態(tài)在app初始狀態(tài)的時候秦士，都是空的（對于todo list值來說，后面我們需要導(dǎo)入之前持久存儲的數(shù)據(jù)永高，這個我們后面再講）隧土，當(dāng)我們在TextInput中輸入字符的時候，會更新當(dāng)前正在輸入的todo value命爬；當(dāng)我們按下鍵盤上的"done"按鈕的時候曹傀，會將這個todo value增加到todo list里，同時將這個value清空饲宛。
2個state
- value: 存儲當(dāng)前正在輸入的todo皆愉，TextInput onChangeText事件會更新這個狀態(tài)
- items: 存儲所有todo list，TextInput onSubmitEditing事件會更新這個狀態(tài)，同時將value狀態(tài)設(shè)置為空亥啦。
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
}
});
// 導(dǎo)出這個模塊届吁，供外部調(diào)用
export default Header;
我們可以看到错妖，我們在Header是創(chuàng)建了一個TextInput，并且把值和處理方法都放在Header的props中傳給了這個TextInput疚沐，也就是意味著我們不需要在Header中寫代碼來處理app的邏輯暂氯，這部分代碼我們統(tǒng)一放在app.js里來做。
我們對Header傳了三個props:
- value亮蛔，是一個值痴施，就是app用于存儲當(dāng)前正在輸入的todo value
- onChange，一個回調(diào)函數(shù)究流，用于TextInput onChangeText的時候辣吃，更新app.state.value
- onAddItem，一個回調(diào)函數(shù)芬探，當(dāng)TextInput onSubmitEditing（提交）的時候神得，更新app.state.items，并將app.state.value設(shè)置為空偷仿。
接下來我們在app.js里實現(xiàn)這部分代碼哩簿。
初始化state
在App類的構(gòu)造方法里，初始化state
// 構(gòu)造方法,初始化state
constructor(props) {
super(props);
// 初始化2個狀態(tài)
this.state = {
value: "",
items: []
};
}
TextInput onSubmitEditing回調(diào)函數(shù)
/*
傳給Header.TextInput.onSubmitEditing的回調(diào)函數(shù)
更新this.state.items
設(shè)置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})}
/>
運行結(jié)果如下：
當(dāng)然，現(xiàn)在按下Done增加一個新的todo渺杉，我們的app沒有任何變化蛇数，我們將在下一篇中講解如果顯示todo list。
本節(jié)代碼：https://github.com/zhiwehu/todo/tree/second
- React Native實戰(zhàn)開發(fā)1：搭建開發(fā)環(huán)境
- React Native實戰(zhàn)開發(fā)2：布局
- React Native實戰(zhàn)開發(fā)3：模塊劃分
- React Native實戰(zhàn)開發(fā)4：屬性和狀態(tài)
- React Native實戰(zhàn)開發(fā)5：使用TextInput
- React Native實戰(zhàn)開發(fā)6：使用ListView
- React Native實戰(zhàn)開發(fā)7：使用Switch更新todo complete狀態(tài)
- React Native實戰(zhàn)開發(fā)8: 刪除todo item
