Day 18 To Do List - 加入逻辑 1

第 18 天～

昨天已经把画面给布置好了

有了画面，但是没有任何的逻辑，所以现在任何操作其实都不会有相关的逻辑

今天我们来把相关的逻辑给建立起来，

react 是以资料逻辑来带动画面变化的，

所以必须建立相对应的资料以及逻辑，

来达成我们预期的变化，

来看看我们的需求：

• 新增代办事项
• 完成代办事项
• 搜寻
• 全部完成
• 代办事项列表

所以我们可以翻译成：

• 新增项目
• 改变项目状态
• filter 列表
• 改变列表状态
• 显示列表

从上面的需求看，

显示列表

我们必须有个地方来保存列表资料，

并且跟着画面做连动

在这里我们些把 App component 转成 class component

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <SafeAreaView style={styles.root}>
        <View style={styles.header}>
          <Text style={styles.title}>My To Do List</Text>
          <TextInput style={styles.input} />
          <View style={styles.buttonGroup}>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>Add</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>Search</Text>
            </TouchableOpacity>
            <TouchableOpacity style={styles.button}>
              <Text style={styles.buttonText}>Complete All</Text>
            </TouchableOpacity>
          </View>
        </View>
        <FlatList
          data={list}
          renderItem={({ item, index, separators }) => {
            const backgroundColorStyle =
              index % 2 === 0 ? styles.itemEven : styles.itemOdd;
            return (
              <TouchableOpacity
                style={[styles.item, backgroundColorStyle, styles.itemDone]}>
                <View style={[styles.tickArea, styles.tick]}></View>
                <Text style={[styles.itemText, styles.doneText]}>
                  {item.text}
                </Text>
              </TouchableOpacity>
            );
          }}
          keyExtractor={(item) => item.id}
        />
      </SafeAreaView>
    );
  }
}

并在 state 设定 list 参数，用来保存我们的 todoList 内容

constructor(props) {
  super(props);
  this.state = {
    list:[]
  }
}

并把 list 带入到 render 的 FlatList data 里

render() {
  const {list} = this.state;
  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.header}>
        <Text style={styles.title}>My To Do List</Text>
        <TextInput style={styles.input} />
        <View style={styles.buttonGroup}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Add</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Search</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonText}>Complete All</Text>
          </TouchableOpacity>
        </View>
      </View>
      <FlatList
        data={list}
        renderItem={({item, index, separators}) => {
          const backgroundColorStyle =
            index % 2 === 0 ? styles.itemEven : styles.itemOdd;
          return (
            <TouchableOpacity
              style={[styles.item, backgroundColorStyle, styles.itemDone]}>
              <View style={[styles.tickArea, styles.tick]}></View>
              <Text style={[styles.itemText, styles.doneText]}>
                {item.text}
              </Text>
            </TouchableOpacity>
          );
        }}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

这时候画面会是：

这样代表我们的资料跟画面已经初步产生连动了，

新增列表项目

接下来我们要可以把在 input 输入的内容新增到 list

首先我们新增 inputValue state 来保存 input 的内容：

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

把 inputValue 带入到 TextInput component

const { list, inputValue } = this.state;
<TextInput style={styles.input} value={inputValue} />;

在 TextInput component 设定 onChangeText，

onInputChange = (text) => {
  this.setState(() => {
    return {
      inputValue: text,
    };
  });
};

<TextInput
  style={styles.input}
  value={inputValue}
  onChangeText={this.onInputChange}
/>;

这样，与 input 的连动就告一段落了，

再来， 我们来定义 todo item 的格式，

来看看 item 的需求：

• 要有 text 来叙述做什麽
• 要可以有 status 判断 done or not done
• 要有 id 方便之後好搜寻，那这必须要有唯一性，所以用 timestamp 来当做 id 好了

所以我们格式大约是，

const item ={
  id: 0
  text: '',
  status: ''// done or not done
}

所以我们建立一个 function 专门控管 item 新增

createToDoItem = () => {
  const { inputValue, list } = this.state;

  const item = {
    id: new Date().getTime(),
    text: inputValue,
    status: 'not Done',
  };

  const newList = [...list, item];

  this.setState(() => {
    return {
      inputValue: '',
      list: newList,
    };
  });
};

像上面的程序码，

我们先把 state 取出 inputValue ＆ list，

在把 需要新增的 item 放入到 list，

然後记得把 inputValue ， 不然 input 会留住已新增的项目

最後，用 setState 来更新，

最後把 createToDoItem 放入到 Add 的 TouchableOpacity component 的 onPress

<TouchableOpacity style={styles.button} onPress={this.createToDoItem}>
  <Text style={styles.buttonText}>Add</Text>
</TouchableOpacity>

那结果会是：

这样就看到，我们的资料新增已经跟画面连动了