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 } }} />; } })
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() { const { vocabulary } = this.props; const { v_apply } = vocabulary; return ( <div className="wrapper_project_search_bar"> <div className="project_search_bar_search_field_container"> <i className="magnifer" /> <input onChange={e => this.setDefaultArr()} type="text" onKeyUp={e => (e.keyCode === 13 ? this.search() : null)} ref={input => (this.searchInput = input)} className="project_search_bar_search_field" /> </div> <div className="project_search_bar_button_container"> <button className="project_search_bar_button" onClick={e => this.search()}> {v_apply} </button> </div> </div> ); }
let AddTodo = ({ dispatch }) => { let input return ( <header className="header"> <h1>todos</h1> <input ref={node => { input = node }} className="new-todo" placeholder="What needs to be done?" autoFocus onKeyDown={e => { if (e.keyCode == 13) { e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = '' } }}/> </header> ) }
const NumberSearch = (props) => { return ( <> <input type="number" value={props.number} placeholder="Put a number in me.." onChange={(e) => { props.onNumberChange(e.target.value); }} onKeyUp={(e) => { if (e.keyCode === 13) { props.submitRequest(); } }} /> <button onClick={props.submitRequest}>Search</button> </> ); }
render() { return ( <div style={{ textAlign: 'center' }}> <TextField id="username" label="Username" placeholder="Username" value={this.props.username} margin="normal" onChange={(e) => { loginActions.setUsername(e.target.value) }} /><br /> <TextField id="password" label="Password" placeholder="Password" value={this.props.password} margin="normal" type="password" onChange={(e) => { loginActions.setPassword(e.target.value) }} onKeyUp={(e) => { if (e.keyCode === 13) { appActions.setLoader(true); this.dologin(); } }} /><br /> <Button variant="contained" disabled={this.props.loading} color="primary" onClick={(e) => { appActions.setLoader(true); this.dologin(); }}>{this.props.loading ? <CircularProgress size={16} color="secondary" style={{ marginRight: '5px' }} /> : null} Login Me </Button> </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> }
view(({ model, dispatch }) => ( <div> <input placeholder="What kind of gifs do you want?" value={model.topic} onKeyDown={ev => { if (ev.keyCode === 13) { dispatch({ type: 'Create' }); } }} onChange={ev => dispatch({ type: 'ChangeTopic', value: ev.target.value })} style={inputStyle} /> <div style={{ display: 'flex', flexWrap: 'wrap' }}> {model.gifViewers.map((gifViewerModel, index) => <GifViewer key={index} model={gifViewerModel} dispatch={forwardTo(dispatch, 'GifViewer', index)} />)} </div> </div> ))
render() { var props = { ref: 'newTodo', type: 'text', placeholder: 'New todo' }; return ( <div> <input {...props} onKeyDown={(event) => { if (event.keyCode === 13) { this._saveTodo(); } }}/> <button onClick={this._saveTodo}>Add</button> </div> ); }
render() { const { inputValue } = this.state; return ( <div className="Federation_input"> <AutosizeInput type="text" name="inputPriceAsset" placeholder="username" maxLength="32" autoFocus value={inputValue} onChange={e => this.handleInput(e)} onFocus={(e) => { const preValue = e.target.value; e.target.value = ''; e.target.value = preValue; }} onKeyUp={(e) => { this.props.onKeyPressed(e.keyCode); }} /> </div> ); }
render() { return ( <div className='search'> <h3>GitHub Search</h3> <input type="text" onChange={this.handleChange} onKeyUp={(e) => { if (e.keyCode === 13) { this.handleClick(); return false; } }} value={this.state.search} placeholder='Search' /> <button onClick={this.handleClick} disabled={!this.state.search}> Search </button> <div className='search-results'> {this.state.results && this.state.results} </div> </div> ); }
render() { const { onSubmit } = this.props; let input; return ( <div> <input className="input input--text" type="text" ref={node => input = node} onKeyDown={e => { const todo = input.value.trim(); if (!todo || e.keyCode !== 13) return; onSubmit(todo); input.value = ''; }}/> <button type="submit" className="button button--submit" onClick={() => { const todo = input.value.trim(); if (!todo) return; onSubmit(todo); input.value = ''; }}>Add</button> </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 } }} /> ); } })