1 import React, {Component} from 'react';

     2 

     3 import PropTypes from 'prop-types';

     4 

     5 class NoteInput extends Component {

     6   constructor(props) {

     7     super(props);

     8 

     9     this.state = {value: ''};

    10 

    11     this.onAddNoteClick = this.onAddNoteClick.bind(this);

    12     this.handleChange = this.handleChange.bind(this);

    13   }

    14 

    15   handleChange(event) {

    16     this.setState({value : event.target.value});

    17   }

    18 

    19   onAddNoteClick(event) {

    20     this.props.addNote(this.state.value);

    21 

    22     this.noteInput.value = "";

    23 

    24     this.noteInput.focus();

    25   }

    26 

    27   componentDidMount() {

    28     this.noteInput.focus();

    29   }

    30 

    31   render() {

    32     return (

    33       <div>

    34         <textarea

    35           id="noteText"

    36           onChange={this.handleChange}

    37           placeholder="note"

    38           ref={(input) => { this.noteInput = input; }}

    39         />

    40         <button onClick={this.onAddNoteClick}>Add Note</button>

    41       </div>

    42     );

    43   }

    44 }

    45 

    46 NoteInput.propTypes = {

    47   addNote: PropTypes.func.isRequired

    48 };

    49 

    50 export default NoteInput;