React Native实战开发7:使用Switch来更新todo complete状态

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

使用Switch来修改todo item的状态

今天我们将使用React Native的Switch控件来修改一个todo item的状态。

首先修改row.js文件,导入Switch

import {View, Text, StyleSheet, Switch} from "react-native";

然后使用这个Switch控件,非常简单,我们只要将todo.complete属性传给Switch的value属性即可。注意我们在上节中,将整个todo item的属性都传给了Row的props,所以这里只需要使用this.props.complete即可。

<Switch
  value = {this.props.complete}
/>

我们需要给Switch的onValueChange绑定一个事件的处理方法,我们并不在row.js里定义这个事件的处理方法,而是和之前的方式一样,将这个方法通过props传递进去。

<Switch
  value = {this.props.complete}
  onValueChange = {this.props.onComplete}
/>

这个onComplete是在app.js里传递给row的。

<Row
  key={key}
  onComplete = {(complete) => this.handleToggleComplete(key, complete)}
  {...value}
/>

我们来定义这个handleToggleComplete方法:

handleToggleComplete(key, complete) {
  const newItems = this.state.items.map((item) => {
    if (item.key !== key) return item;
    return {
      ...item,
      complete
    }
  });

  this.setSource(newItems, newItems);
}

这里使用了Array.map方法,遍历todo list里每一条todo,如果发现其key和传递进来的key相同,使用ES6的...操作符来更新complete状态。

以下是运行结果。
![](https://zhiwehu.gitbooks.io/react-native/content/assets/switch todo complete.png)

代码:https://github.com/zhiwehu/todo/tree/switch

  1. React Native实战开发1:搭建开发环境
  2. React Native实战开发2:布局
  3. React Native实战开发3:模块划分
  4. React Native实战开发4:属性和状态
  5. React Native实战开发5:使用TextInput
  6. React Native实战开发6:使用ListView
  7. React Native实战开发7:使用Switch更新todo complete状态
  8. React Native实战开发8: 删除todo item
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容