Manage ASL magazines and their articles.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
import React from "react" ;
|
|
|
|
import "./SearchForm.css" ;
|
|
|
|
|
|
|
|
// --------------------------------------------------------------------
|
|
|
|
|
|
|
|
export default class SearchForm extends React.Component
|
|
|
|
{
|
|
|
|
|
|
|
|
constructor( props ) {
|
|
|
|
// initialize
|
|
|
|
super( props ) ;
|
|
|
|
this.state = {
|
|
|
|
queryString: "",
|
|
|
|
} ;
|
|
|
|
|
|
|
|
// initialize
|
|
|
|
this.queryStringRef = React.createRef() ;
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<form id="search-form" onSubmit={this.onSearch.bind(this)}>
|
|
|
|
<label className="caption"> Sea<u>r</u>ch for: </label>
|
|
|
|
<input type="text" className="query"
|
|
|
|
value = {this.state.queryString}
|
|
|
|
onChange = { e => this.setState( { queryString: e.target.value } ) }
|
|
|
|
ref = {this.queryStringRef}
|
|
|
|
autoFocus
|
|
|
|
/>
|
|
|
|
<button type="submit" title="Search the database." />
|
|
|
|
</form>
|
|
|
|
) ;
|
|
|
|
}
|
|
|
|
|
|
|
|
onSearch( evt ) {
|
|
|
|
evt.preventDefault() ;
|
|
|
|
this.props.onSearch( this.state.queryString ) ;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|