Last active
September 26, 2017 13:13
-
-
Save harpreetkhalsagtbit/f46066904799ba37496e4cdd5ff5fef9 to your computer and use it in GitHub Desktop.
Stateless Component - Interaction with parent's state
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react'; | |
import TextInput from '../../common/TextInput'; | |
import PropTypes from 'prop-types'; // ES6 | |
import './Add.css'; | |
const AddUrl = ({urlShortForm, saveURLHandler, triggerPreviewURL}) => { | |
var _changeInterval = null; | |
let onKeyUpAddShortUrlTextInput = function(event) { | |
let _this = this; | |
// wait untill user type in something | |
// Don't let call setInterval - clear it, user is still typing | |
clearInterval(_changeInterval); | |
_changeInterval = setInterval(function() { | |
var regExUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)/ | |
if(regExUrl.test(urlShortForm.url)) { | |
console.log("ajax") | |
//this function is bind with parents this | |
triggerPreviewURL($("#id").val()) | |
// _this.props.urlMetadataPreviewAction.previewURL(_this.state.urlForm) | |
} else { | |
//set state/props | |
} | |
// Typing finished, now you can Do whatever after 2 sec | |
clearInterval(_changeInterval) | |
}, 1000); | |
} | |
return ( | |
<div className="addUrlContainer"> | |
<div className="addUrlChildWrapper shadow"> | |
<span></span> | |
<input type="text" placeholder="Add Url" onKeyUp={onKeyUpAddShortUrlTextInput}/> | |
<span><i className="fa fa-times" aria-hidden="true"></i></span> | |
</div> | |
</div> | |
); | |
}; | |
export default AddUrl; | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You shouldn't need to use jQuery to query the DOM. In React, the DOM shouldn't be a source of truth. It should be a projection of app state. So suggest moving the data you're querying from the DOM into to React's state.