client/src/components/NoteInput.js
changeset 8 6f572b6b6be3
parent 5 5c91bfa8fcde
child 12 48ddaa42b810
equal deleted inserted replaced
7:218abb8b1cad 8:6f572b6b6be3
     1 import React, {Component} from 'react';
     1 import React, {Component} from 'react';
     2 
     2 
     3 import ReactDOM from 'react-dom'
     3 import { Form, FormGroup, Button } from 'react-bootstrap';
     4 import { Form, FormControl, FormGroup, Button } from 'react-bootstrap';
       
     5 
     4 
     6 import PropTypes from 'prop-types';
     5 import PropTypes from 'prop-types';
     7 import SlateEditor from './SlateEditor';
     6 import SlateEditor from './SlateEditor';
     8 
     7 
     9 class NoteInput extends Component {
     8 class NoteInput extends Component {
    19   handleChange(event) {
    18   handleChange(event) {
    20     this.setState({value : event.target.value});
    19     this.setState({value : event.target.value});
    21   }
    20   }
    22 
    21 
    23   onAddNoteClick(event) {
    22   onAddNoteClick(event) {
    24     const text = this.refs.editor.asPlain();
    23     //const text = this.refs.editor.asPlain();
    25     this.props.addNote(text);
    24     if(this.state.value && this.state.value.length > 0) {
    26     this.refs.editor.clear();
    25       this.props.addNote(this.state.value);
    27   }
    26       this.refs.editor.clear();
    28 
    27     }
    29   componentDidMount() {
       
    30     // this.noteInput.focus();
       
    31   }
    28   }
    32 
    29 
    33   render() {
    30   render() {
    34     return (
    31     return (
    35       <Form>
    32       <Form>
    36         <FormGroup>
    33         <FormGroup>
    37           <SlateEditor ref="editor" />
    34           <SlateEditor ref="editor" onChange={this.handleChange} />
    38         </FormGroup>
    35         </FormGroup>
    39         <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
    36         <Button type="button" onClick={this.onAddNoteClick}>Add Note</Button>
    40       </Form>
    37       </Form>
    41     );
    38     );
    42   }
    39   }