Day 19 To Do List - 加入逻辑 2

第 19 天～

昨天做到了，新增项目的部分，

像这样：

改变状态

当我们可以成功的展示新增的项目後，

我们希望可以按一下项目，就让他切换 完成｜未完成，

我们把焦点放到 FlatList ，

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea]}></View>
        <Text style={[styles.itemText]}>{item.text}</Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

在 TouchableOpacity component 的 onPress 加入 changeItemStatus，

changeItemStatus = (id) => () => {
  const { list } = this.state;
  const index = list.findIndex((item) => item.id === id);

  const nowItem = list[index];

  const newStatus = nowItem.status === 'done' ? 'not done' : 'done';

  list[index] = {
    ...nowItem,
    status: newStatus,
  };

  this.setState(() => {
    return {
      list: [...list],
    };
  });
};

changeItemStatus 会先放入 item 的 id，

最後返回一个 function 放入 onPress 等待触发，

主要在座的就是从 list 取出 item 资讯，

判断之後的 status 并做出改变，

最後在更新 list

结果会是：

嗯... 未啥画面不动，

...对了，还需要加入 style，

更新过後的 FlatList component

<FlatList
  data={list}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    const isDone = item.status === 'done';
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, isDone && styles.itemDone]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea, isDone && styles.tick]}></View>
        <Text style={[styles.itemText, isDone && styles.doneText]}>
          {item.text}
        </Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

结果如下：

这样我们完成了改变项目的状态

搜寻

设定 state ，新增 filterKey

this.state = {
  filterKey: '',
  inputValue: '',
  list: [],
};

在 FlatList component 根据 filterKey filter list

<FlatList
  data={list.filter((item) => item.text.includes(filterKey))}
  renderItem={({ item, index, separators }) => {
    const backgroundColorStyle =
      index % 2 === 0 ? styles.itemEven : styles.itemOdd;
    const isDone = item.status === 'done';
    return (
      <TouchableOpacity
        style={[styles.item, backgroundColorStyle, isDone && styles.itemDone]}
        onPress={this.changeItemStatus(item.id)}>
        <View style={[styles.tickArea, isDone && styles.tick]}></View>
        <Text style={[styles.itemText, isDone && styles.doneText]}>
          {item.text}
        </Text>
      </TouchableOpacity>
    );
  }}
  keyExtractor={(item) => item.id}
/>

在 Search 的按钮这里，加入 searchList function，

<TouchableOpacity style={styles.button} onPress={this.searchList}>
  <Text style={styles.buttonText}>Search</Text>
</TouchableOpacity>

searchList 根据 inputValue 更新 filterKey

searchList = () => {
  this.setState((state) => {
    return {
      filterKey: state.inputValue,
    };
  });
};

结果为：

更改列表全部状态为完成

在 Complete All 的按钮这里，加入 handleCompleteAll function，

<TouchableOpacity style={styles.button} onPress={this.handleCompleteAll}>
  <Text style={styles.buttonText}>Complete All</Text>
</TouchableOpacity>

handleCompleteAll 会把所有的 list status 全部设定为 done

handleCompleteAll = () => {
  this.setState((state) => {
    return {
      list: state.list.map((item) => {
        return {
          ...item,
          status: 'done',
        };
      }),
    };
  });
};

结果为：