2020/01/22

【前端】實戰 ASP.NET C# 移轉到 REACT 02



上一回提到登入頁面製作後，這次要帶實作主畫面。

原本主畫面長這樣：
 修改時會另開視窗進行編輯：
當時是利用後端進行 HTML 繪製，也就是 Server side 的處理方式，現在使用 REACT 會擦出什麼火花呢？

當時不會排版，不會CSS，連HTML標籤都知道的很少， 所以排版方式使用 Table 處理，就如同上圖的畫面。

REACT + Bootstrap 對 Table 不是太友善，我在 Caption 屬性就卡關了。

故用 Tabs 和 ListGroup 進行排版，畫面如下：



使用 Client side 的好處就是不用與 Server 頻繁 callback 和畫面轉換，所以新增和修改就安排在同一個畫面進行即可。


畫面程式碼如下：
import React, { useState } from "react";
import { Form, Col, Row, Button, FormGroup, FormControl, FormLabel, Table, Tabs, Tab,InputGroup, Alert,
  ListGroup } from "react-bootstrap";

function Main(props){
  const [show, setShow] = useState(false);
  const [email, setEmail] = useState("Eden");
  const [password, setPassword] = useState("L@veEden");
  const [errorMessage, setErrorMessage] = useState("")
  const [errorPasswordMessage, setErrorPasswordMessage] = useState("")

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  function handleSubmit(event) {
    let formData = new FormData(document.getElementById('input-form'))

    event.preventDefault()
  }

  return (
  <>
  <div style={{margin:"10px auto","max-width": "640px"}}>
    <h1>Hello Eden</h1>
    <div class="text-right" style={{margin:"10px"}}>
      <Button variant="link">我要登出</Button>
    </div>

    <Tabs defaultActiveKey="home">
      <Tab eventKey="home" title="新增區塊" disabled style={{paddingTop:"13px"}}>
        <form id="input-form" onSubmit={handleSubmit}>
          <Form.Group as={Row} controlId="formHorizontalEmail" size="lg">
            <Form.Label column sm={2}>報修人全名</Form.Label>
            <Col sm={4}>
              <Form.Control autoFocus type="text" placeholder="報修人全名" value={email} onChange={e => setEmail(e.target.value)} />
            </Col>
            <Col sm={6}><Alert variant="danger" show={show}>查無此人，請重新輸入！</Alert></Col>
          </Form.Group>
          <FormGroup controlId="password" size="lg">
            <FormLabel >請描述您所遇到的問題，以利資訊部門分配工作</FormLabel >
            <FormControl as="textarea" aria-label="With textarea" />
          </FormGroup>
          <Button block size="lg" disabled={!validateForm()} type="submit">
            我輸入好了，快來幫我修！
          </Button>
        </form>
      </Tab>
    </Tabs>
  </div>
  <div style={{margin:"10px auto","max-width": "640px"}}>
    <Tabs defaultActiveKey="home">
      <Tab eventKey="home" title="未結案的資訊需求單" disabled style={{paddingTop:"13px"}}>
        <ListGroup>
          <ListGroup.Item>
            <Row>
              <Col>測試1</Col>
              <Col xs lg="2"><Button variant="info">編輯</Button></Col>
            </Row>
          </ListGroup.Item>
          <ListGroup.Item>
            <Row>
              <Col>測試2</Col>
              <Col xs lg="2"><Button variant="info">編輯</Button></Col>
            </Row>
          </ListGroup.Item>
          <ListGroup.Item>
            <Row>
              <Col><FormControl
                  autoFocus
                  type="text"
                  value="測試3"
                /></Col>
              <Col xs lg="2"><Button>儲存</Button></Col>
            </Row>
          </ListGroup.Item>
        </ListGroup>
      </Tab>
    </Tabs>
  </div>
  </>
  )
}

export {Main}


主要確認畫面的輸入元件所呈現的樣貌，互動的程式碼會在折分元件後進行實作。


See also


沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)