⛳
tailwindcss + next.js、IndexedDBの CRUD作成
概要:
tailwindcss + next.js、IndexedDBの CRUD作成
- tailwindcss初期設定等は、前の記事を参考にしてます
環境
- tailwindcss: 2.1.2
- next.js : 10.1.3
- node 14
- IndexedDB
参考のデモページ
https://cms-kuc-jamstack-ex14.netlify.app/
参考のコード
- create , form関連クラスを使用
pages/tasks/create.js
create.js
export default class extends Component {
constructor(props){
super(props)
this.state = {title: '', content: ''}
this.handleClick = this.handleClick.bind(this);
//console.log(props)
}
componentDidMount(){
var config = LibTask.get_const()
this.db = new Dexie( config.DB_NAME );
this.db.version(config.DB_VERSION).stores( config.DB_STORE );
}
handleChangeTitle(e){
this.setState({title: e.target.value})
}
handleChangeContent(e){
this.setState({content: e.target.value})
}
handleClick(){
this.add_item()
}
async add_item(){
try {
var item = {
title: this.state.title,
content: this.state.content,
created_at: new Date(),
}
// console.log(item)
await this.db.tasks.add( item )
Router.push('/tasks');
} catch (error) {
console.error(error);
}
}
render() {
return (
<div className="bg-gray-100">
<Layout>
<div className="container mx-auto px-5 py-4 bg-white">
<Link href="/tasks">
<a className="btn-outline-blue my-2">Back</a>
</Link>
<h1 className="text-5xl font-bold my-4">Tasks - Create
</h1>
<hr className="my-2" />
<div className="w-full max-w-md">
<label>Title:</label>
<input className="input_text_gray my-2" type="text" placeholder="Name123"
onChange={this.handleChangeTitle.bind(this)} />
<hr className="my-2" />
<label>Content:</label>
<textarea className="input_textarea_gray my-2"
rows="8"
onChange={this.handleChangeContent.bind(this)}></textarea>
</div>
<div className="form-group">
<button className="btn-blue" onClick={this.handleClick}>Create
</button>
</div>
<hr />
</div>
</Layout>
</div>
)
}
}
- 画面 / create
参考のページ
- Next.js + IndexedDB CRUD作成と、netlifyにデプロイ
....
Discussion