rax学习:实现一个简易的todolist

Posted mingL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了rax学习:实现一个简易的todolist相关的知识,希望对你有一定的参考价值。

仓库地址:rax-todolist

简单介绍一下

rax系列由易到难完成一些小demo来培养学习的兴趣。后面会讲一些自己对rax框架的认识和理解,学习完成一些示例之后会开始研究源码实现以及rax为什么能兼容多端。todolist是一个简单的小例子,可以算作是学习rax练手的demo。环境和前一篇相同,

需求

  1. 输入完成添加一项,并且清除输入框
  2. 点击项加删除线

解决方案

需求简单,使用react-hooks实现功能。

  • 添加可以使用useState()创建一个变量value,记录当前输入的值
  • 删除可以使用onClick事件完成样式更改,修改text-decoration:\'line-through\'即可
  • 添加完成清除输入框内容稍微麻烦一点,需要使用createRef和TextInput的clear()方法

关键代码

  • 目录结构

  • 关键代码
import { createElement,createRef,useState, useEffect } from \'rax\';
import View from \'rax-view\';
import Text from \'rax-text\';
import TextInput from "rax-textinput";

export default function TodoList() {
  const [value,setValue]=useState([]);
  const inputRef = createRef();
  // 添加项
  function handleChange(e){
    value.push(e.value)
    setValue([...value])
    inputRef.current.clear();
  }
  // 点击画删除线
  function handleClick(e){
    e.target.style.textDecoration=\'line-through\'
  }
  //value变化更新dom
  useEffect(()=>{},[value])
  // list项
  const todolist=value.map((item,index)=>(<Text 
    key={index} 
    style={{height:\'40rpx\'}} 
    onClick={(e)=>handleClick(e)}> • {item}</Text>))
  return (
    <View>
      <TextInput 
        style={{border:\'solid 1px #ccc\'}}
        ref={inputRef}
        placeholder=\'请输入...\'
        onChange={(e)=>handleChange(e)}/>
      <View className=\'todo-list\'>{todolist}</View>
    </View>
  );
}

效果展示

参考

以上是关于rax学习:实现一个简易的todolist的主要内容,如果未能解决你的问题,请参考以下文章

使用Vue.js实现一个简易的TodoList示例

Vuejs 实现简易 todoList 功能 与 组件

rax学习:第一个rax应用程序程序HelloWorld

小程序 第一个学习示例(TodoList)

[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist

Vue项目实战——实现一个任务清单基于 Vue3.x 全家桶(简易版)