35 lines
980 B
JavaScript
35 lines
980 B
JavaScript
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;
|
|
};
|
|
} |