如何在 Chakra-UI 输入框按下回车键时提交？

Question

我正在创建一个包含输入框的组件，当用户按下 Enter 键或点击搜索按钮时，它会将用户重定向到新选项卡。搜索按钮功能正常，但我无法让输入框在按下 Enter 键时调用 handleSubmit 方法。目前按下 Enter 键不起作用。我该如何实现这一点？ 代码：

  const LinkCard = (props) => {
  const [searchInput, setSearchInput] = useState("");
  const handleChange = (e) => {
    setSearchInput(e.target.value);
  };
  const handleClick = (e) => {
    e.preventDefault();
    location.assign("http://www.mozilla.org");
  };

  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>
      <InputGroup>
        <Input
          placeholder={"Search " + props.websiteName}
          onChange={handleChange}
          onSubmit={handleSubmit}
          flexGrow="1"
          m="2%"
        />
        <Link href={props.url} passHref={true}>
          <a>
            <InputRightElement m="2%">
              <Button onClick={handleClick}>
                <FaSearch />
              </Button>
            </InputRightElement>
          </a>
        </Link>
      </InputGroup>
    </Flex>
  );
};

- JacobDClark

Answer 1

const [value, setValue] = React.useState('');
return (
<form
  onSubmit={e=> {
    e.preventDefault();
    location.assign('?wd=' + value)
  }}>
  <input value={value} onChange={(e)=> setValue(e.currentTarget.value)} />
  <button type="submit">Search</button>
</form>
)

或者

const [value, setValue] = React.useState('');

return (
<>
  <input 
     value={value} 
     onChange={(e)=> setValue(e.currentTarget.value)} 
     onKeyPress={e=> {
        if (e.key === 'Enter') {
           location.assign('?wd=' + value)
        }
     }}
  />
  <button onClick={()=> location.assign('?wd=' + value)}>Search</button>
</>
);

- 欧阳斌

Answer 2

Typescript答案

我发现这是一个很常见的问题，所以创建了一些实用的帮助函数：

import {KeyboardEvent} from "react"

export function handleEnterKeyPress<T = Element>(f: () => void){
    return handleKeyPress<T>(f, "Enter")
}

function handleKeyPress<T = Element>(f: () => void, key: string){
    return (e: KeyboardEvent<T>) => {
        if(e.key === key){
            f()
        }
    }
}

这些函数在技术上被称为“高阶函数”，因为它们将一个普通的、没有参数的void函数提升，然后返回一个可以直接传入onKeyDown方法的良好类型化的事件处理程序。

示例代码:

<Input {...props} onKeyDown={handleEnterKeyPress(myFunction)}/>

当按下回车键时运行任何无返回值函数的函数名为myFunction。

注意：应使用onKeyDown而不是onKeyPress，因为后者已弃用。

更新

如果您想处理多个键，则我发现上述略微更灵活的版本很有帮助：

import {KeyboardEvent} from "react"

export function handleEnterKeyPress<T = Element>(f: () => void){
    return handleKeyPress<T>({Enter: f})
}

export type KeyPressMap = {
    [key: string]: () => void
}

export function handleKeyPress<T = Element>(map: KeyPressMap){
    return (e: KeyboardEvent<T>) => {        
        const handler = map[e.key]
        if(handler !== undefined){
            handler()
        }
    }
}

然后在你的组件中，你可以像这样调用它，例如，其中handleEnter和handleEscape被假定为一些可访问你的组件的函数：

const keyPressHandlers = {
    Enter: handleEnter,
    Escape: handleEscape
}

return <Input onKeyDown={handleKeyPress(keyPressHandlers)}/>

- Colm Bhandal

Answer 3

你可以通过以下两种方式之一来实现：

• 在你的 submitHandler 上添加键盘监听器：

const handleSubmit = e => {
  e.preventDefault();
  if (e.key === "Enter") {
    location.assign("http://www.mozilla.org");
  }
};

• 在你的输入框周围添加一个form并添加提交事件：

<form onSubmit={handleSubmit}>
  <Input
    placeholder={"Search " + props.websiteName}
    onChange={handleChange}
    onSubmit={handleSubmit}
    flexGrow="1"
    m="2%"
  />
</form>;

- Ryan Le