41 lines
978 B
TypeScript
41 lines
978 B
TypeScript
import * as React from "react";
|
|
|
|
const { useState } = React;
|
|
|
|
interface SearchBoxProps {
|
|
initialValue: string;
|
|
onSearch: Function;
|
|
}
|
|
|
|
type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
|
|
type ClickEvent = React.MouseEvent<HTMLInputElement>;
|
|
|
|
export const SearchBox = ({
|
|
initialValue,
|
|
onSearch
|
|
}: SearchBoxProps): JSX.Element => {
|
|
const [value, setValue] = useState(initialValue || "");
|
|
|
|
const onChange = (event: ChangeEvent) => {
|
|
setValue(event.target.value);
|
|
};
|
|
|
|
const onClick = (_event: ClickEvent) => {
|
|
onSearch(value);
|
|
};
|
|
|
|
const onClear = (_event: ClickEvent) => {
|
|
setValue("");
|
|
onSearch("");
|
|
};
|
|
|
|
return (
|
|
<div className="searchform">
|
|
<label htmlFor="search">Search: </label>
|
|
<input type="text" name="search" value={value} onChange={onChange} />
|
|
<input type="button" name="send" value="Search" onClick={onClick} />
|
|
<input type="button" name="clear" value="clear" onClick={onClear} />
|
|
</div>
|
|
);
|
|
};
|