在input输入框按回车键触发函数并阻止页面重载的实现方案

你遇到的回车页面重载是<CForm>的默认表单提交行为导致的：浏览器默认在表单内的输入框按下回车时，会自动触发表单提交动作，默认提交就会重载页面。你可以选择以下任意一种方案解决：

方案1：绑定表单提交事件（更推荐） #

给CForm加上onSubmit事件，阻止默认提交行为，同时执行添加候选人的逻辑。这种方式下点击按钮、按回车都会触发逻辑，复用性更高。
修改后的代码示例：

<CForm 
  className="form-horizontal"
  onSubmit={(e) => {
    e.preventDefault()
    setAddCandidate([...addCandidate, condidateName])
  }}
>
  <CFormGroup row className="condidateContainrer">
    <CCol md="4 mt-3">
      <CLabel>Name of condidate:</CLabel>
    </CCol>
    <CCol md="7 mt-2">
      <CInput
        type="text"
        placeholder="Search Here"
        onChange={(e) => {
          setCondidateName(e.target.value);
        }}
      />
    </CCol>
    <CButton
      color="success"
      variant="outline"
      type="submit" 
    >
      +
    </CButton>
  </CFormGroup>
</CForm>

方案2：单独给输入框绑定键盘监听事件 #

如果不需要修改表单原有逻辑，可以单独给CInput加onKeyDown事件，监听回车键按下的动作，阻止默认行为后执行目标逻辑即可：

<CInput
  type="text"
  placeholder="Search Here"
  onChange={(e) => {
    setCondidateName(e.target.value);
  }}
  onKeyDown={(e) => {
    if(e.key === 'Enter') {
      e.preventDefault()
      setAddCandidate([...addCandidate, condidateName])
    }
  }}
/>

内容的提问来源于stack exchange，提问作者SEMER BEN SALEM