[ Home ]
back

form 編集の例、shadcnUI + Express.js + React

id: 170, 2024-10-08

概要:

デモ用の。Express.js + shadcn/UI form画面の例になります。

  • server側の、変数にformデータを保存する方式です。
  • dbは使わない方式です。
  • shadcn/UI dataTableと、組み合わせ構成です。

[ 公開日: 2024/10/07 ]

構成

  • shadcn/UI
  • Express.js
  • esbuild
  • React
  • typescript

作成したコード

https://github.com/kuc-arc-f/bun_32shadcn/tree/main/example/form_test

dev-start

bun run build
bun run dev

return (
<dialog id="confirmDialog" className="dialog rounded-md">
  <div className="bg-white rounded-lg px-8 pt-3 pb-3 dialog_body_wrap w-[450px]" id="form1">
    <p className="text-2xl font-bold">{props.message}</p>
    <hr className="my-2" />
    <div className="grid grid-cols-4 items-center gap-4">
      <Label htmlFor="username" className="text-right">
      title
      </Label>
      {(props.type_create === 1)?(
        <Input id="title" name="title" 
        defaultValue={""} className="col-span-3" />  
      ):(
        <Input id="title" name="title"disabled={true}
        defaultValue={props.formData.title} className="col-span-3" />
      )} 
    </div>
    <div className="grid grid-cols-4 items-center gap-4 mt-2">
      <Label htmlFor="content" className="text-right">
      content
      </Label>
      <Textarea id="content" name="content" className="col-span-3"
        rows={4} defaultValue={props.formData.content} />
    </div>
    {/* public */}
    <div class="flex flex-row">
      <div class="w-[90px] p-2 m-1 text-end">
        <Label htmlFor="content" className="text-right">public
        </Label>
      </div>
      <div class="flex-1 py-3 m-1">
        <input id="radio1" type="radio" name="public" 
        className="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500"
        value="1"
        defaultChecked={props.formData.radio1}
        onChange={(event)=>{
          console.log("#radio1.checked=" + event.target.checked);
          setRadio1(event.target.checked);
        }}
        />
        <label for="radio1" className="ms-2 mt-2 text-sm font-medium text-gray-900">Public
        </label>
        <hr />
        <input id="radio2" type="radio" name="public" 
        className="mt-2 w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500"
        value="0"
        defaultChecked={props.formData.radio2}
        onChange={(event)=>{
          setRadio2(event.target.checked);
        }}
        />
        <label for="radio2" className="ml-2 text-sm font-medium text-gray-900">None</label>
      </div>
    </div>
    {/* option */}
    <div className="flex flex-row">
      <div className="w-[90px] p-2 m-1 text-end">
        <Label htmlFor="content" className="text-right">OptionCheck
        </Label>
      </div>
      <div className="flex-1 py-3 m-1">
        <input type="checkbox" id="checkbox_1" name="checkbox_1" 
        className="w-5 h-5 mx-2 " defaultChecked={props.formData.option_1} 
        onChange={(event)=>{
          console.log("#checkbox_1.checked=" + event.target.checked);
          setOption1(event.target.checked);
        }} />
        <Label htmlFor="checkbox_1" className="text-right">CheckBox1
        </Label><hr />
        <input type="checkbox" id="checkbox_2" name="checkbox_2" 
        className="w-5 h-5 mx-2 " defaultChecked={props.formData.option_2} 
        onChange={(event)=>{ setOption2(event.target.checked); }} />
        <Label htmlFor="" className="text-right">CheckBox2
        </Label><hr />
        <input type="checkbox" id="checkbox_3" name="checkbox_3" 
        className="w-5 h-5 mx-2 " defaultChecked={props.formData.option_3} 
        onChange={(event)=>{ setOption3(event.target.checked); }} />
        <Label htmlFor="" className="text-right">CheckBox3
        </Label><hr />
      </div>
    </div>
    <div className="flex flex-row">
      <div className="w-[90px] p-2 m-1 text-end">
        <Label htmlFor="" className="text-right">Num
        </Label>
      </div>
      <div className="flex-1 py-3 m-1">
        <Label htmlFor="num1" className="text-right">num1
        </Label>
        <Input type="number" id="num1" name="num1" 
          defaultValue={props.formData.num1} className="col-span-3" />  
        <hr className="my-1" />
        <Label htmlFor="num2" className="text-right">num2
        </Label>
        <Input type="number" id="num2" name="num2" 
          defaultValue={props.formData.num2} className="col-span-3" />  
      </div>
    </div>
    <hr className="my-2" />
    {/* footer_button */}
    <div className="text-end">
      <button onClick={()=>closeButton()}
        className="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-1 px-4 border border-blue-500 hover:border-transparent rounded"
        type="submit" value="OK">Cancel</button>
        {(props.type_create === 1)?(
          <Button onClick={()=>okFunc()} className="mx-2"
          value="OK">Create</Button>
        ):(
          <>
          {/* 
            <Button onClick={()=>okEditFunc()} className="mx-2"
            value="OK">Save</Button>
          */}
          </>
        )}
    </div>
  </div>
</dialog>
);