用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，听老师讲跟自己做真的感觉很不一样，能够用课堂上学到的东西，把自己想要做的功能做出来，真的是很开心。