Digikam-FatClient/src/searchbar.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';

export class SearchBar extends React.Component {
    state = {
        text_value: false,
    }

    onSubmitHandler = () => { this.props.onSubmit(this.state.text_value); }
    onChangeHandler = (e) => { this.setState({ text_value: e.target.value }); }
    keyDownHandler = (e) => {
        if (e.key === 'Enter') {
            this.onSubmitHandler();
        }
    }

    render() {
        return (
            <>
                <TextField variant="outlined" fullWidth label="Search" type="text" onChange={this.onChangeHandler} onKeyDown={this.keyDownHandler} />
            </>
        );
    }
}