client/src/components/NoteInput.js
author ymh <ymh.work@gmail.com>
Mon, 22 May 2017 17:59:19 +0200
changeset 2 b52921a63e77
parent 1 431977d7c9a6
child 5 5c91bfa8fcde
permissions -rw-r--r--
add scss + bootstrap
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
import React, {Component} from 'react';
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
2
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     3
import ReactDOM from 'react-dom'
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     4
import { Form, FormControl, FormGroup, Button } from 'react-bootstrap';
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
     5
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
import PropTypes from 'prop-types';
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
class NoteInput extends Component {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
  constructor(props) {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
    super(props);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
    this.state = {value: ''};
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
    this.onAddNoteClick = this.onAddNoteClick.bind(this);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
    this.handleChange = this.handleChange.bind(this);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  handleChange(event) {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
    this.setState({value : event.target.value});
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
  onAddNoteClick(event) {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
    this.props.addNote(this.state.value);
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
    this.noteInput.value = "";
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
    this.noteInput.focus();
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  componentDidMount() {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
    this.noteInput.focus();
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
  render() {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
    return (
2
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    36
      <Form>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    37
        <FormGroup>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    38
          <FormControl
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    39
              componentClass="textarea"
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    40
              placeholder="Enter note"
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    41
              onChange={this.handleChange}
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    42
              ref={(input) => { this.noteInput = ReactDOM.findDOMNode(input); }}
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    43
          />
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    44
        </FormGroup>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    45
        <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
b52921a63e77 add scss + bootstrap
ymh <ymh.work@gmail.com>
parents: 1
diff changeset
    46
      </Form>
1
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    47
    );
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    48
  }
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    49
}
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    50
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    51
NoteInput.propTypes = {
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    52
  addNote: PropTypes.func.isRequired
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    53
};
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    54
431977d7c9a6 add first react application skeleton
ymh <ymh.work@gmail.com>
parents:
diff changeset
    55
export default NoteInput;