import React from 'react' ; import * as GreetingActions from '../actions/GreetingActions' ; interface Props { newGreeting : string ; } class WhoToGreet extends React . Component < Props , any > { constructor ( props ) { super ( props ) ; } static propTypes : React . ValidationMap < Props > = { newGreeting : React . PropTypes . string . isRequired } ; render ( ) { return ( < form role = "form" > < div className = "form-group" > < input type = "text" className = "form-control" placeholder = "Who would you like to greet?" value = { this . props . newGreeting } onChange = { this . _handleNewGreetingChange } / > < button type = "submit" className = "btn btn-default btn-primary" onClick = { this . _onSubmit } disabled = { this . _preventSubmission } > Add greeting < /button> < /div> < /form>); } get _preventSubmission ( ) { return ! this . props . newGreeting ; } _handleNewGreetingChange = ( event ) => { const newGreeting = ( event . target as HTMLInputElement ) . value ; GreetingActions . newGreetingChanged ( newGreeting ) ; } ; _onSubmit = ( event ) => { event . preventDefault ( ) ; if ( ! this . _preventSubmission ) { GreetingActions . addGreeting ( this . props . newGreeting ) ; } } ; } export default WhoToGreet ;