From d68bc6e975aa549840cea4904fafe11f78ad3b3c Mon Sep 17 00:00:00 2001 From: Vitaly Takmazov Date: Sun, 24 Jun 2018 18:25:55 +0300 Subject: SearchBox component --- vnext/src/components/SearchBox.js | 30 ++++++++++++++++++++++++++++++ vnext/src/index.js | 10 +++++----- 2 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 vnext/src/components/SearchBox.js (limited to 'vnext') 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
+ +
+ } +} + +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 { }