[React] 양식을 엔터키로 제출하는 방법

3417 단어 ReactTypeScript

소개



검색 양식을 입력했을 때 검색 버튼을 일부러 누르는 것이 번거롭기 때문에,
엔터키로 검색 조건을 제출하는 방법을 찾았습니다.

방법


export default function SearchField() {
  const dispatch = useDispatch();
  const [inputText, setInputText] = React.useState("");

  const pressEnter = (e: any) => {
    // ここでエンターキーを指定する
    if (e.key == "Enter") {
      dispatch(
        fetchPresentations({
          query: e.target.value,
        })
      );
    }
  };

  return (
    <Search>
      <SearchIconWrapper>
        <SearchIcon />
      </SearchIconWrapper>
      {/* onKeyDownを使用する */}
      <StyledInputBase placeholder="検索" onKeyDown={(e) => pressEnter(e)} />
    </Search>
  );
}

완성



이제 엔터키를 누르기만 하면 검색할 수 있습니다.
검색 버튼도 더 이상 필요하지 않으므로 숨겼습니다.

Tailwind에서 파란색 프레임을 지우는 방법
Electron+React에서 Hello world

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage