diff options
author | 2019-02-25 01:15:35 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | e461c70b7424f744b30f7559b11b814cf7dba9e2 (patch) | |
tree | e1a6036b45609ca682e16c40fb08754b29590968 /vnext/src | |
parent | c91704560c7a09e23d621cee0ba7f86574690706 (diff) |
SearchBox using useFormState hook
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/components/SearchBox.js | 35 |
1 files changed, 11 insertions, 24 deletions
diff --git a/vnext/src/components/SearchBox.js b/vnext/src/components/SearchBox.js index 314b89fb..edd7dfcf 100644 --- a/vnext/src/components/SearchBox.js +++ b/vnext/src/components/SearchBox.js @@ -2,33 +2,20 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactRouterPropTypes from 'react-router-prop-types'; import { withRouter } from 'react-router-dom'; +import { useFormState } from 'react-use-form-state'; -class SearchBox extends React.Component { - constructor(props) { - super(props); - this.state = { - search: '' - }; - } - handleChange = (event) => { - this.setState({ - search: event.target.value - }); - } - onSubmit = (event) => { - const { history, pathname } = this.props; +function SearchBox({ onSearch, history, pathname }) { + let onSubmit = (event) => { event.preventDefault(); - this.props.onSearch(history, pathname, this.state.search); - this.setState({ - search: '' - }); - } - render() { - return (<form onSubmit={this.onSubmit}> - <input name="search" className="text" - placeholder="Search..." value={this.state.search} onChange={this.handleChange} /> - </form>); + onSearch(history, pathname, formState.values.search); } + const [formState, { text }] = useFormState(); + return ( + <form onSubmit={onSubmit}> + <input name="search" className="text" + placeholder="Search..." value={ formState.values.search } {...text('search')} /> + </form> + ); } SearchBox.propTypes = { |