码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-08-10 23:17:30      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:ocs   list   com   png   方案   list()   ora   change   efault   

仓库地址: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官方文档 createref

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

标签:ocs   list   com   png   方案   list()   ora   change   efault   

原文地址:https://www.cnblogs.com/xingguozhiming/p/13472857.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!