text #react #event

Posted 2021-04-30

import React from 'react';

class SearchBar extends React.Component {
    state = { term: '' }
    // constructor(props) {
    //     super(props);
    //     this.state = { term: '' };
    // }
    // onInputChange(event) {
    //     console.log(event.target.value);
    //     //        this.setState({searchItem: event.target.value })
    // }
    // onInputClick(event) {
    //     console.log(event.target.value)
    // }
    render() {
        return (
            <div>
                <form className="ui form">
                    <div className="ui category search">
                        <div className="ui icon input">
                            <input className="prompt" type="text"
                                placeholder="Search News..." 
                                value={this.state.term}
                                onChange={(e) => this.setState({ term: e.target.value.toUpperCase() })}
                                onClick={this.onInputClick} />
                            <i className="search icon"></i>
                        </div>
                        <div className="results" ></div>
                    </div>
                </form>
            </div>
        )
    }
}

export default SearchBar;