您如何在 Chakra-UI 输入中按 Enter 键提交？

Question

我正在创建一个包含输入的组件，该输入在按下回车键或单击搜索按钮时将用户引导至新选项卡。 搜索按钮功能正常，但是我无法获取输入以在输入键按下时调用 handleSubmit 方法。 到目前为止，按回车键什么都不做。 我怎样才能做到这一点？ 代码：

  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>
  );
};

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

有两种可能的方法可以实现：

• 在您的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>;

Answer 3

Typescript 回答

我发现这是一个很常见的问题，可以创建一些 util 辅助函数：

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 function 并为您返回一个类型良好的事件处理程序，该处理程序可以直接传递给onKeyDown方法。

示例代码：

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

其中myFunction是任何 void function 您想在按下回车键时运行。

注意：您应该使用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)}/>