|
1
|
1 |
import React, {Component} from 'react'; |
|
|
2 |
|
|
2
|
3 |
import ReactDOM from 'react-dom' |
|
|
4 |
import { Form, FormControl, FormGroup, Button } from 'react-bootstrap'; |
|
|
5 |
|
|
1
|
6 |
import PropTypes from 'prop-types'; |
|
|
7 |
|
|
|
8 |
class NoteInput extends Component { |
|
|
9 |
constructor(props) { |
|
|
10 |
super(props); |
|
|
11 |
|
|
|
12 |
this.state = {value: ''}; |
|
|
13 |
|
|
|
14 |
this.onAddNoteClick = this.onAddNoteClick.bind(this); |
|
|
15 |
this.handleChange = this.handleChange.bind(this); |
|
|
16 |
} |
|
|
17 |
|
|
|
18 |
handleChange(event) { |
|
|
19 |
this.setState({value : event.target.value}); |
|
|
20 |
} |
|
|
21 |
|
|
|
22 |
onAddNoteClick(event) { |
|
|
23 |
this.props.addNote(this.state.value); |
|
|
24 |
|
|
|
25 |
this.noteInput.value = ""; |
|
|
26 |
|
|
|
27 |
this.noteInput.focus(); |
|
|
28 |
} |
|
|
29 |
|
|
|
30 |
componentDidMount() { |
|
|
31 |
this.noteInput.focus(); |
|
|
32 |
} |
|
|
33 |
|
|
|
34 |
render() { |
|
|
35 |
return ( |
|
2
|
36 |
<Form> |
|
|
37 |
<FormGroup> |
|
|
38 |
<FormControl |
|
|
39 |
componentClass="textarea" |
|
|
40 |
placeholder="Enter note" |
|
|
41 |
onChange={this.handleChange} |
|
|
42 |
ref={(input) => { this.noteInput = ReactDOM.findDOMNode(input); }} |
|
|
43 |
/> |
|
|
44 |
</FormGroup> |
|
|
45 |
<Button type="button" onClick={this.onAddNoteClick}>Add Note</Button> |
|
|
46 |
</Form> |
|
1
|
47 |
); |
|
|
48 |
} |
|
|
49 |
} |
|
|
50 |
|
|
|
51 |
NoteInput.propTypes = { |
|
|
52 |
addNote: PropTypes.func.isRequired |
|
|
53 |
}; |
|
|
54 |
|
|
|
55 |
export default NoteInput; |