diff options
author | 2018-06-24 18:25:55 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | d68bc6e975aa549840cea4904fafe11f78ad3b3c (patch) | |
tree | 8e8733912d05e4b273e8c43b8a3c68aa796b6f5a /vnext | |
parent | 660cc823d4f2446dbc3113b2de4d3164664303fb (diff) |
SearchBox component
Diffstat (limited to 'vnext')
-rw-r--r-- | vnext/src/components/SearchBox.js | 30 | ||||
-rw-r--r-- | vnext/src/index.js | 10 |
2 files changed, 35 insertions, 5 deletions
diff --git a/vnext/src/components/SearchBox.js b/vnext/src/components/SearchBox.js new file mode 100644 index 00000000..38414c78 --- /dev/null +++ b/vnext/src/components/SearchBox.js @@ -0,0 +1,30 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class SearchBox extends React.Component { + constructor(props) { + super(props) + this.state = { + search: '' + } + } + handleChange = (event) => { + this.setState({ + search: event.target.value + }) + } + onSubmit = (event) => { + event.preventDefault() + this.props.onSearch(this.state.search); + } + render() { + return <form onSubmit={this.onSubmit}> + <input name="search" className="text" + placeholder="Search..." value={this.state.search} onChange={this.handleChange} /> + </form> + } +} + +SearchBox.propTypes = { + onSearch: PropTypes.func.isRequired +} diff --git a/vnext/src/index.js b/vnext/src/index.js index 9dbf21e7..3f3f1f60 100644 --- a/vnext/src/index.js +++ b/vnext/src/index.js @@ -14,6 +14,7 @@ import LoginButton from './components/LoginButton'; import Footer from './components/Footer'; import Avatar from './components/Avatar'; import Header from './components/Header'; +import SearchBox from './components/SearchBox'; import { me } from './api'; @@ -39,7 +40,9 @@ class App extends React.Component { me().then(visitor => this.auth(visitor)) } } - + search = (searchString) => { + console.log(searchString) + } render() { const user = this.state.visitor; return ( @@ -55,10 +58,7 @@ class App extends React.Component { <div id="logo"><Link to="/">Juick</Link></div> } <div id="search"> - <form action="/"> - <input name="search" className="text" - placeholder="Search..." /> - </form> + <SearchBox onSearch={this.search} /> </div> <nav id="global"> <ul> |