import React from "react" ; import { Filter } from "./filter" ; interface FilterProps { submitFilter : ( filter : Filter ) => void ; } export class FilterInputComponent extends React . Component < FilterProps , Filter > { constructor ( props ) { super ( props ) ; this . state = { pattern : '' , newValue : '' } ; } submitFilter ( ) { const filter = Object . assign ( { } , this . state ) ; this . props . submitFilter ( filter ) ; this . setState ( { pattern : '' , newValue : '' } ) ; } formChangeHandler = ( event ) => { const key = event . target . name ; const { value } = event . target ; this . setState ( { ... this . state , [ key ] : value , } ) ; } ; render ( ) { return ( < div style = { { display : 'flex' } } className = { 'filters' } > < input name = 'pattern' id = 'pattern' value = { this . state . pattern . toString ( ) } placeholder = "regex or string" onChange = { this . formChangeHandler } / > < input name = 'newValue' id = 'newValue' value = { this . state . newValue } placeholder = "replace with" onChange = { this . formChangeHandler } / > < button id = 'regex-button-add' onClick = { ( _ ) => this . submitFilter ( ) } > + < /button> < /div>); } }