aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-02-25 01:15:35 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commite461c70b7424f744b30f7559b11b814cf7dba9e2 (patch)
treee1a6036b45609ca682e16c40fb08754b29590968
parentc91704560c7a09e23d621cee0ba7f86574690706 (diff)
SearchBox using useFormState hook
-rw-r--r--vnext/src/components/SearchBox.js35
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 = {