iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

用React刻自己的投資Dashboard系列 第 30

用React刻自己的投資Dashboard Day30 - 股票代號輸入防呆機制

tags: 2021鐵人賽 React

股票代號輸入錯誤當機問題

Day28的文章有提到,當使用者想要輸入股票代號看K線圖時,如果輸入的股票代號是錯誤的,也就是台股並沒有使用者輸入的代號,整個程式會直接當機,因此應該做個防呆機制。

錯誤處理方式

在輸入股票代號的元件設置防呆措施,步驟如下:

  • 設置控制錯誤訊息視窗開啟/關閉的state
  • 當使用者按下送出時,透過Day29的文章寫的股票代號名稱table,查詢是否有此代號,如果沒有就開啟錯誤訊息,並清空輸入格。

錯誤訊息視窗處理方式

這邊用的是react-bootstrap套件的Modal component,官方範例如下,很簡單易懂:

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

使用者按下送出後執行的程式

如下程式,跟官方範例有一點點不同,我是在使用者按下送出後,透過submitHandler去處理。

const submitHandler = (event) => {
    event.preventDefault();
    if (!stockName[enteredStockNo]) {
      setShow(true);
      setEnteredStockNo('');
    } else {
      props.onStockNoChange(enteredStockNo);
    }
  };

成果

小結

加上防呆機制之後,使用者體驗好很多,雖然是很基本的功能,不過如果沒做,當機的感覺可是很糟的啊~

30天心得

透過這30天的時間做了一個小專案,對於剛接觸React的我,非常充實的學了很多技術,之前主要是在udemy學習React,聽老師講跟自己做真的感覺很不一樣,能夠用課堂上學到的東西,把自己想要做的功能做出來,真的是很開心。


上一篇
用React刻自己的投資Dashboard Day29 - 替股票加上名稱
系列文
用React刻自己的投資Dashboard30

尚未有邦友留言

立即登入留言