withRouter( ({ staticContext, history, location, match, ...rest }: Props) => ( <Link {...rest} onClick={evt => { if (rest.onClick) rest.onClick(evt); if (evt.metaKey || evt.ctrlKey) return; if (window.appUpdateAvailable === true) { evt.preventDefault(); // This is copied from react-router's <Link /> component and is basically what it does internally const location = typeof rest.to === 'string' ? createLocation(rest.to, null, null, history.location) : rest.to; return (window.location = history.createHref(location)); } }} /> ) )
export default function addItems({addItem, clear}) { const { resetValue, ...item } = useInputValue(""); return ( <div style={styles.container}> <input placeholder='Packing Item' type='text' style={styles.inputStyle} {...item} /> <button style={styles.buttonAdd} onClick={e => { e.preventDefault(); addItem(item.value); resetValue; }} > ADD </button> <button style={styles.buttonClear} onClick={clear} > CLEAR </button> </div> ) }
<button className={`lossless btn ${compression === 'lossless' ? 'active' : ''}`} onClick={(e) => { e.stopPropagation(); e.preventDefault(); props.changeCompressionMode('lossless'); }}> <button className={`lossy btn ${compression === 'lossy' ? 'active' : ''}`} onClick={(e) => { e.stopPropagation(); e.preventDefault(); props.changeCompressionMode('lossy'); }}>
const Link = ({ to, children }) => ( <a onClick={(e) => { e.preventDefault(); history.push(to); }} href={to} > {children} </a> )
render() { return <div className='Page'> Click to <a onClick={e => { e.preventDefault(); this.redirectTo('/') } }>Redirect</a> </div>; }
pages.push( <li role="presentation" key={`pagination_${pageNumber}`} className={pageNumber === currentPage ? 'active' : ''} onClick={() => onChangePage(pageNumber)} onKeyDown={() => onChangePage(pageNumber)} > <a href="#" onClick={(event) => event.preventDefault()}> {pageNumber} </a> </li>, );
function ListComponent({idx, value, onChange, onRemove}) { return ( <div className="list-component"> <input type="text" value={value} onChange={(e) => onChange(idx, e.target.value)}/> <button onClick={(e) => { e.preventDefault() onRemove(idx); }}>X </button> </div> ); }
const Cell = ({ value, page, setPage }) => ( <li className={`page-item ${value === page ? 'active' : ''}`}> <Link to="" className="page-link" onClick={e => { e.preventDefault(); setPage(value); }}> {value + 1} </Link> </li> )
const Cell = ({ tag, selectedTag, setSelectedTag }) => ( <Link to="" className={`tag-default tag-pill ${tag === selectedTag ? 'active' : ''}`} onClick={e => { e.preventDefault(); setSelectedTag(tag === selectedTag ? null : tag); }}> {tag} </Link> )
render() { return ( <a href="#" onClick={e => { e.preventDefault(); this.props.FilterTodo(this.props.filter); }}> {this.props.children} </a> ); }
const Button = ({ onClick }) => { return ( <button className="clear-completed" onClick={e => { e.preventDefault() onClick() }}>Clear completed </button> ) }
const LinkButton = ({ classes, text, onClick }) => ( <a href="" className={classes.root} onClick={e => { e.preventDefault(); onClick(); }} > {text} </a> )
const FilterLink = ({filter, children}) => { return ( <a href='' onClick={ (e) => { e.preventDefault() store.dispatch({ type: 'SET_VISIBILITY_FILTER', filter }) }}>{children}</a> ) }
const Logout = ({ onClick }) => { return ( <a href="#" onClick={e => e.preventDefault() & onClick()} className="link blue"> Logout </a> ) }
export default function addItems({addItem, clear}) { const { resetValue, ...item } = useInputValue(""); return ( <div style={styles.container}> <input placeholder='Packing Item' type='text' style={styles.inputStyle} {...item} /> <button style={styles.buttonAdd} onClick={e => { e.preventDefault(); addItem(item.value); resetValue; }} > ADD </button> <button style={styles.buttonClear} onClick={clear} > CLEAR </button> </div> ) }