-
-
Save orange888/6ab30c80075b47d5244991fa37bf9be8 to your computer and use it in GitHub Desktop.
Calling a React component's methods from outside of React. Demo https://plnkr.co/edit/E6lPrL331KGxoikGinFm?p=preview
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> | |
| <link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" /> | |
| <script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script> | |
| <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script> | |
| <script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class='container'> | |
| <h1>Hello World!</h1> | |
| <button id='btnShow' type="button" class="btn btn-primary">Show</button> | |
| <button id='btnHide' type="button" class="btn btn-primary">Hide</button> | |
| <div id="translator" class='mt-5'></div> | |
| <div id="output"></div> | |
| </div> | |
| <script src="translator.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
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
| var translator = ReactDOM.render(React.createElement(Translator), document.getElementById('translator')); | |
| $(function() { | |
| $('#btnShow').click(function() { | |
| $('#output').text(''); | |
| translator.show('Hola Mundo! Este es el control de Translator.', 'en', 'es', function(text) { | |
| $('#output').text(text); | |
| }); | |
| }); | |
| $('#btnHide').click(function() { | |
| translator.hide(); | |
| }); | |
| }); |
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
| class Translator extends React.Component { | |
| constructor(props) { | |
| super(props); | |
| this.state = { | |
| sourceLang: 'es', | |
| destLang: 'en', | |
| text: '', | |
| isVisible: false | |
| }; | |
| this.onTranslate = this.onTranslate.bind(this); | |
| }; | |
| show(text, sourceLang, destLang, callback) { | |
| this.setState({ isVisible: true, text: text, sourceLang: sourceLang, destLang: destLang, callback: callback }); | |
| } | |
| hide() { | |
| this.setState({ isVisible: false }); | |
| } | |
| onTranslate() { | |
| this.state.callback('Hello world! This is the Translator control.'); | |
| this.hide(); | |
| } | |
| render() { | |
| return ( | |
| <div className={ 'translator-component ' + (this.state.isVisible ? '' : 'hidden-xs-up') } > | |
| <div className="card"> | |
| <div className="card-header"> | |
| Translator | |
| </div> | |
| <div className="card-block"> | |
| <h4 className="card-title"></h4> | |
| <p className="card-text"> | |
| { this.state.text } | |
| </p> | |
| <a href="#" className="btn btn-primary" onClick={ this.onTranslate }>Translate</a> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment