stamp.compose({ render (){ return <input type="text" ref="input" onKeyDown={ event => { if (event.keyCode === 13) { const input = this.refs.input; this.props.addTodo(input.value.trim()); input.value = ''; } }} />; } })
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); }} /> ); }
const Input = ({ setMessage, sendMessage, message }) => ( <form className="form"> <input className="input" type="text" placeholder="Type a message..." value={message} onChange={({ target: { value } }) => setMessage(value)} onKeyPress={(event) => (event.key === 'Enter' ? sendMessage(event) : null)} /> <button className="sendButton" onClick={(e) => sendMessage(e)}>Send</button> </form> )
const SearchBar = ({onEnter, onTextChange, text}) => <div className="SearchBar" onKeyPress={(e) => { if (e.charCode === 13) onEnter(text);} }> <input value={text} onChange={e => onTextChange(e.target.value)}/> </div>
stamp.compose({ render (){ const {id, disabled, completed, text, readableTodo, writeableTodo} = this.props; return <input ref="input" disabled={ disabled } defaultValue={ text } style={ { textDecoration: (completed) ? 'line-through': 'none' } } onBlur={ () => { readableTodo(id) } } onDoubleClick={ () => { writeableTodo(id) } } onKeyDown= { (event) => { if (event.keyCode === 13) { this.refs.input.blur(); // <- why we need stamp.compose } }} />; } })
const TimeInput = (props) => { const { value, min, max } = props; return ( <input className="input-time" type="number" value={value} onChange={e => props.onValueChange(Number(e.target.value))} onKeyPress={e => props.onValueChange(Number(e.target.value))} min={min} max={max} /> ); }
const Input = ({ sendMessage, messageRef, name, email }) => ( <form className="form-input-message"> <Avatar classes={ 'avatar-input' } email={ email } /> <p className="name-input">{ name }</p> <input className="input-line" type="text" ref={ messageRef } placeholder="Type a message, press enter..." onKeyPress={event => event.key === 'Enter' ? send(event, sendMessage) : null} /> <span className="send-icon" onClick={ sendMessage }></span> </form> )
render() { return ( <div className="AirportSearch"> <Input size="large" prefix={<Icon type="search" />} onPressEnter={(e) => this.addAirport(e.target.value)}/> </div> ); }
render() { return ( <div> <input type='text' ref='myInput' placeholder='look!' onKeyUp={(evt) => this.setState({txt: evt.target.value})} /> <span>{this.state.txt}</span> </div> ); }
const AddMessage = (props) => { let input return ( <section id="new-message"> <input onKeyPress={(e) => { if (e.key === 'Enter') { props.dispatch(input.value, "Me") input.value = "" } }} type="text" ref={(node) => {input = node}} /> </section> ) }
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> )
stamp.compose({ render (){ return <input type="text" ref="input" onKeyDown={ event => { if (event.keyCode === 13) { const input = this.refs.input; this.props.addTodo(input.value.trim()); input.value = ''; } }} />; } })
stamp.compose({ render (){ const {id, disabled, completed, text, readableTodo, writeableTodo} = this.props; return ( <input ref="input" disabled={ disabled } defaultValue={ text } style={ { textDecoration: (completed) ? 'line-through' : 'none' } } onBlur={ () => readableTodo(id) } onDoubleClick={ () => writeableTodo(id) } onKeyDown= { (event) => { if (event.keyCode === 13) { this.refs.input.blur(); // <- why we need stamp.compose } }} /> ); } })