如何在Chakra-UI Input组件中实现回车键触发提交功能？

嘿，我来帮你搞定这个回车键没反应的问题！

你现在遇到的核心问题是：<input>元素本身并不支持onSubmit事件，这个事件是专门给<form>标签设计的，所以你给Input加onSubmit自然不会生效。下面给你两种靠谱的解决方案，推荐第一种，更符合HTML语义化规范：

方案一：用<form>包裹输入框和按钮（推荐） #

把你的InputGroup放到<form>标签里，把handleSubmit绑定到form的onSubmit事件上，同时把按钮的type设为submit。这样不管是点击搜索按钮，还是按下回车键，都会触发form的提交事件，完美统一逻辑。

而且你会发现handleClick和handleSubmit的逻辑完全一样，还能把它们合并成一个方法，减少冗余代码。

修改后的完整代码如下：

const LinkCard = (props) => { 
  const [searchInput, setSearchInput] = useState(""); 
  const handleChange = (e) => { 
    setSearchInput(e.target.value); 
  }; 
  // 合并原来的handleClick和handleSubmit逻辑
  const handleSubmit = (e) => { 
    e.preventDefault(); 
    location.assign("http://www.mozilla.org"); 
  }; 
  return ( 
    <Flex borderWidth="1px" borderRadius="lg" alignItems="center"> 
      {props.icon} 
      <Box>{props.websiteName}</Box> 
      {/* 用form包裹输入区域，绑定提交事件 */}
      <form onSubmit={handleSubmit}>
        <InputGroup> 
          <Input 
            placeholder={"Search " + props.websiteName} 
            onChange={handleChange} 
            flexGrow="1" 
            m="2%" 
          /> 
          <InputRightElement m="2%"> 
            {/* 按钮设为submit类型，点击会触发form的onSubmit */}
            <Button type="submit"> 
              <FaSearch /> 
            </Button> 
          </InputRightElement> 
        </InputGroup> 
      </form>
    </Flex> 
  ); 
};

方案二：给Input添加键盘事件监听 #

如果不想用form标签，也可以给Input加onKeyDown事件，手动监听回车键的按下动作：

<Input 
  placeholder={"Search " + props.websiteName} 
  onChange={handleChange} 
  onKeyDown={(e) => {
    // 监听回车键触发提交
    if (e.key === 'Enter') {
      handleSubmit(e);
    }
  }}
  flexGrow="1" 
  m="2%" 
/>

不过这种方式不如form语义化，需要手动处理回车逻辑，还是第一种方案更简洁规范。

另外提个小建议：你原来的<Link>和<a>标签其实没起到实际作用（按钮点击直接调用了跳转逻辑），可以把这部分冗余代码去掉，让组件更干净。

内容的提问来源于stack exchange，提问作者JacobDClark