SearchBar.tsx 1.04 KB
Newer Older
Zac Wood's avatar
Zac Wood committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
import * as React from 'react';

interface Props {
    onSearch: (searchTerm: string) => void;
}

interface State {
    searchTerm: string;
}

export default class SearchBar extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = { searchTerm: '' };

        this.onSearch = this.onSearch.bind(this);
        this.updateSearchTerm = this.updateSearchTerm.bind(this);
    }

    updateSearchTerm(event: any) {
        this.setState({
            searchTerm: event.target.value,
        });
    }

    onSearch(event: any) {
        this.props.onSearch(this.state.searchTerm);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.onSearch}>
                <input
                    type="text"
                    placeholder="Enter CRN..."
                    value={this.state.searchTerm}
                    onChange={this.updateSearchTerm}
                />
                <input type="submit" value="Search" />
            </form>
        );
    }
}