I'm trying to set up my search so when I click enter it will begin to search and redirect to the search page. I was looking through the documentation and it wasn't clear how to set this up. How can I set up pressing enter to begin the search? I'm having a tough time figuring this out, even though I think it should be simple.
class SearchBar extends Component {
constructor(props) {
super(props)
this.state = {query: '', results: [], isLoading: false}
}
componentWillMount() {
this.resetComponent()
}
resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })
search(query) {
this.setState({ query });
axios
.get(`/api/search?query=${query}`)
.then(response => {
console.log(query);
this.setState({ results: response.data});
})
.catch(error => console.log(error));
}
handleSearchChange = (query) => {
this.search(query);
this.setState({ isLoading: true, query })
setTimeout(() =>
this.setState({
isLoading: false,
}) , 300)
}
handleResultSelect = (e, { result }) => this.setState({ query: result} )
render () {
const resultRenderer = ({ title }) => <List content = {title}/>
return (
<Search
loading={this.state.isLoading}
onResultSelect={this.handleResultSelect}
onSearchChange={(event) => {this.handleSearchChange(event.target.value)}}
showNoResults={false}
query={this.props.query}
selectFirstResult = {true}
resultRenderer={resultRenderer}
results ={this.state.results}
{ ...this.props} />
);
}
}
export default SearchBar
Thanks!
To submit a form using the Enter key in React: Add a button element with type set to submit . Add an onSubmit prop that points to a submit handler function. Every time the user presses Enter, the handle submit function will be invoked.
Let us create a React project and then we will create a UI that takes input from users. Users can interact with the UI and press Enter Key to trigger an event through this. We will be creating an input field that takes the message as input.
To get input values on form submit in React: Store the values of the input fields in state variables. Set the onSubmit prop on the form element. Access the values of the input fields in your handleSubmit function.
We start by importing Form , Button , and Input from the Semantic UI package. Next, we use the Form , Form. Field , Input , and Button components to render a form. Also note the import of the Semantic UI CSS file with import "semantic-ui-css/semantic.
Here is a minimal example of how you can do this.
import React from 'react'
import { Form, Input } from 'semantic-ui-react';
class FormExampleForm extends React.Component {
constructor(props) {
super(props);
this.state = {
query: ''
}
}
handleFormSubmit = () => {
console.log('search:', this.state.query);
}
handleInputChange = (e) => {
this.setState({
query: e.target.value
});
}
render() {
return (
<Form onSubmit={this.handleFormSubmit}>
<Form.Input placeholder='Search...' value={this.state.query} onChange={this.handleInputChange} />
</Form>
)
}
}
export default FormExampleForm;
Here is a working example:https://stackblitz.com/edit/react-q5wv1c?file=Hello.js
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With