放弃Javascript-使用kotlin编写react前端应用之todoList

一.相较于typescript，kotlin的优点在于

• 配合idea，更强大的代码提示
• idea编辑器会注明代码块的this指向
• 更强大的强类型机制
• kotlin更优秀的语言机制

二.下面是用kotlin实现todolist应用

核心组件代码

package translate

import kotlinext.js.js
import kotlinx.html.ButtonType
import kotlinx.html.InputType
import kotlinx.html.js.onChangeFunction
import kotlinx.html.js.onClickFunction
import org.w3c.dom.HTMLInputElement
import react.*
import react.dom.*


interface TranslateState : RState {
    var text:String
    var items:List<String?>
}

class Translate(props: RProps): RComponent<RProps, TranslateState>(props) {

    override fun TranslateState.init(props:RProps) {
        text=""
        //items列表初始化
        items=listOf<String>()
        console.log(items)
    }
    override fun RBuilder.render() {
        div(classes = "warp"){
            h1 { +"TodoList" }
            input(type = InputType.text,classes = "search-input",name = "text"){
                key = "text"
                attrs {
                    placeholder="请输入内容"
                    value=state.text
                    onChangeFunction={
                        val target = it.target as HTMLInputElement
                        setState{
                            text=target.value
                        }
                    }
                }
            }
            button(classes = "search-btn"){
                +"确定"
                attrs {
                    onClickFunction={
                        setState{
                            items+=text
                            text=""
                        }
                    }
                }
            }
            div (classes = "resultWrap"){
                +"代办列表"
                attrs.jsStyle = js {
                    marginTop="30px"
                }
                ul {
                    for ((index,item) in state.items.withIndex()){
                        li {
                            key = index.toString()
                            +"${item}"
                            button(classes = "btn btn-danger",type = ButtonType.button) {
                                +"x"
                                attrs.jsStyle = js {
                                    marginLeft="10px"
                                }
                                attrs {
                                    onClickFunction = {
                                        setState {
                                            items = items.filterIndexed { i, _ -> i != index }
                                        }
                                    }
                                }
                            }
                            attrs.jsStyle = js {
                                marginTop="10px"
                            }
                        }
                    }
                }
            }
        }
    }
}





fun RBuilder.translate() = child(Translate::class) {

}

三.效果图

git地址：https://gitee.com/isfive/kotlin-react-app