How do I use enter to submit the Semantic React Search

Question

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!

Does the `onKeyPress` prop handler (and checking if it's the enter key) not work? If so, what errors for you get. That's what I did with my react semantic UI form — Jayce444, Aug 12 '18 at 07:37

score 4 · Accepted Answer · answered Aug 12 '18 at 08:22

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

score -3 · Answer 2 · answered Oct 09 '19 at 04:07

-3

Modify the Search component in semantic-ui react source code to implement the onKeyPress handler

answered Oct 09 '19 at 04:07

Ahmad Sadiq

5

4

I think it will be better to fire an issue on their repository requesting for this modification rather than doing it yourself on the source code. – Cels Dec 03 '19 at 07:47

How do I use enter to submit the Semantic React Search

2 Answers2