render () { return ( <div className="Search"> <h2>Search</h2> <input type="text" onKeyUp={ (e) => this.search(e.target.value) } /> <div> {this.state.movies.map(movie => <MovieBlock movie={movie} key={movie.id} />)} </div> </div> ); }
const InputField = ({ name, value, onUpdate }) => { return ( <input type="text" className="form-control" name={name} defaultValue={value} onKeyUp={(e) => { onUpdate(e.target.value); }} /> ); }
render() { return ( <div> <input type='text' ref='myInput' placeholder='look!' onKeyUp={(evt) => this.setState({txt: evt.target.value})} /> <span>{this.state.txt}</span> </div> ); }
render() { var {value, onEnter} = this.props; return this.state.editing ? <input type="text" defaultValue={ value } style={ this.state.error ? { borderColor: 'red' } : {} } onChange={ e => this.setState({...this.state, error: !e.target.value}) } onBlur={ e => { this.setState({...this.state, editing: false}) onEnter(e.target.value); }} onKeyUp= { e => { if(e.keyCode != 13 || this.state.error) return; this.setState({...this.state, editing: false}); onEnter(e.target.value); }} /> : <span onClick={ () => this.setState({...this.state, editing: true}) }> { value } </span> }
render() { return ( <div className="AirportSearch"> <Input size="large" prefix={<Icon type="search" />} onPressEnter={(e) => this.addAirport(e.target.value)}/> </div> ); }
const Translate = ({ isFetching, result, onKeyUp }) => ( <div className="translate-component"> <div> <textarea onKeyUp={e => (isFetching ? false : onKeyUp(e.target.value))} /> </div> <div> <p>{result}</p> </div> </div> )
autoFocus={true} onKeyDown={(event) => { const target = event.target; const text = target.value; const key = event.key;