放棄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