React + IndexedDBで、form種類対応、select/radio/checkbox/date 型など #React #React.js #node

■ 概要:

React ,node.js版　、
form 種類の対応で、登録等の内容になります。

■ 環境

chrome 84
react
react-dom
react-router-dom
IndexedDB
dexie

■ 参考
https://ja.reactjs.org/docs/forms.html

■　画面

・Create
INPUTの、text, textarea, select ,date, radio ,checkbox

・編集削除

■デモのページ

マガジン内の、デモページ紹介にURL記載しております

■参考のコード

kuc-arc-f/react_idx_5book

■ 実装など、React Component

・Create
https://github.com/kuc-arc-f/react_idx_5book/blob/master/src/component/Book/Create.js

下記、render部分です
handler等で、this.stateに値を設定し。db追加等の処理となります

    render() {
       return (
       <div className="container">
           <Link to="/book" className="btn btn-outline-primary mt-2">Back</Link>
           <hr className="mt-2 mb-2" />
           <h3 className="mt-2">Book - Create</h3>
           <hr className="mt-2 mb-2" />
           <div className="form-group">
               <label>Title:</label>
               <div className="col-sm-6">
                   <input type="text" className="form-control"
                   onChange={this.handleChangeTitle.bind(this)}/>                    
               </div>
           </div>            
           <div className="form-group">
               <label>Content:</label>
               <div className="col-sm-8">
                   <textarea type="text" className="form-control" rows="3"
                   onChange={this.handleChangeContent.bind(this)} ></textarea>
               </div>
           </div>
           <div className="form-group">
               <label>Type:</label>
               <div className="col-sm-6">
                   <select value={this.state.type} onChange={this.handleChangeType.bind(this)}
                   className="form-control">
                       <option value="0">select please</option>
                       <option value="1">option-1</option>
                       <option value="2">option-2</option>
                       <option value="3">option-3</option>
                   </select>
               </div>
           </div>
           <div className="form-group">
               <label>Date:</label>
               <div className="col-sm-6">
                   <input type="date" name="date_1" className="form-control" 
                   onChange={this.handleChange.bind(this)} />
               </div>
           </div>
           <div className="form-group">
               <label>Radio:</label>
               <div className="col-sm-6">
                   <input type="radio" name="radio_1" value="1"
                    onChange={this.handleChangeRadio.bind(this)} /> radio-1
                   <br />
                   <input type="radio" name="radio_1" value="2"
                   onChange={this.handleChangeRadio.bind(this)} /> radio-2
                   <br />
                   <input type="radio" name="radio_1" value="3" 
                   onChange={this.handleChangeRadio.bind(this)} /> radio-3
                   <br />
               </div>
           </div>
           <div className="form-group">
               <label>Checkbox:</label>
               <div className="col-sm-6">
                   <input type="checkbox" name="check_1" checked={this.state.check_1}
                    onChange={this.handleChangeCheck.bind(this)} /> check_1  <br />
                   <input type="checkbox" name="check_2" checked={this.state.check_2}
                    onChange={this.handleChangeCheck.bind(this)} /> check_2  <br />
               </div>
           </div>

           <br />
           <div className="form-group">
               <button className="btn btn-primary" onClick={this.handleClick}>Create
               </button>
           </div>
       
       </div>
       )
   }

・Edit
https://github.com/kuc-arc-f/react_idx_5book/blob/master/src/component/Book/Edit.js