Initial rendering of a Todos-MVC app. (events are called but don't trigger a re-rendering yet, renderin-function does not yet support updating DOM yet)

2019-10-23 01:13:27 +02:00
parent 31cfda50f5
commit 5169c5018d
13 changed files with 361 additions and 47 deletions
--- a/test/todos-mvc/components/todo-input.jsx
+++ b/test/todos-mvc/components/todo-input.jsx
@@ -0,0 +1,35 @@
+import {defineElement, render, CustomElement, Host} from "../../../packages/csx-custom-elements";
+import style from './todo-input.scss';
+
+@defineElement('todo-input')
+export class TodoInput extends CustomElement{
+    value = "";
+    
+    render(){
+        return (
+            <Host>
+                <style>{ style }</style>
+                <form onSubmit={ this.handleSubmit }>
+                    <input
+                        value={this.value}
+                        type="text"
+                        placeholder="What needs to be done?"
+                        onInput={this.handleInput}
+                    />
+                </form>
+            </Host>
+        )
+    }
+    
+    handleSubmit = (e)=>{
+        e.preventDefault();
+        if (!this.value) return;
+        this.dispatchEvent(new CustomEvent('submit', {
+            detail: this.value
+        }));
+        this.state = "";
+    };
+    handleInput = ({target: {value}})=>{
+        this.value = value;
+    };
+}