import * as React from 'react' ; import { Button , ButtonType } from 'office-ui-fabric-react/lib/Button' ; import { TextField } from 'office-ui-fabric-react/lib/TextField' ; import styles from './TodoForm.module.scss' ; import ITodoFormState from './ITodoFormState' ; import ITodoFormProps from './ITodoFormProps' ; export default class TodoForm extends React . Component < ITodoFormProps , ITodoFormState > { private _placeHolderText : string = 'Enter your todo' ; constructor ( props ) { super ( props ) ; this . state = { inputValue : '' } ; this . _handleInputChange = this . _handleInputChange . bind ( this ) ; this . _handleAddButtonClick = this . _handleAddButtonClick . bind ( this ) ; } public render ( ) { return ( < div className = { styles . todoForm } > < TextField className = { styles . textField } value = { this . state . inputValue } placeholder = { this . _placeHolderText } autoComplete = 'off' onChanged = { this . _handleInputChange } / > < div className = { styles . addButtonCell } > < Button className = { styles . addButton } buttonType = { ButtonType . primary } ariaLabel = 'Add a todo task' onClick = { this . _handleAddButtonClick } > Add < /Button> < /div> < /div>); } private _handleInputChange ( newValue ) { this . setState ( { inputValue : newValue } ) ; } private _handleAddButtonClick ( event ? ) { this . setState ( { inputValue : this . _placeHolderText } ) ; this . props . onAddTodoItem ( this . state . inputValue ) ; } }