-
-
Save primaryobjects/64734b8fe3f54aa637f444c95f061eed to your computer and use it in GitHub Desktop.
| <!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> |
| 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(); | |
| }); | |
| }); |
| 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> | |
| ); | |
| } | |
| }; |
Thank you very much, it works! 👍
@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/
This is the proper way to do it.
@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/
The above link is not working now !!
Is it related to this : https://stackoverflow.com/a/37950970/9131807
@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/
The above link is not working now !!
Is it related to this : https://stackoverflow.com/a/37950970/9131807
I guess this method ref={(component) => window.translator = component; } is for legacy versions(<= [email protected]).
For newer versions of react, we can make use of react hooks, forwardRef & useImperativeHandle hook.
For more info check this answer on stackoverflow : https://stackoverflow.com/a/37950970/9131807
@tonthanhhung I was wondering the same thing. Here is a clarification for that new ref approach: https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/
Hi,
ReactDOM.render(<Page ref={(ourComponent) => {window.ourComponent = ourComponent}} />, document.getElementById("app"));
What is 'Page' here??
How to import it??
I had implemented this method when creating components using Class. now I am making it a functional component. Can anyone update how it will work with the functional component using react hooks?
Class-based components were easy to manage I think. Why react developer making it confusing and complicated using hooks?
I guess this method
ref={(component) => window.translator = component; }is for legacy versions(<= [email protected]).
For newer versions of react, we can make use of react hooks, forwardRef & useImperativeHandle hook.
For more info check this answer on stackoverflow : https://stackoverflow.com/a/37950970/9131807
your link is no longer exists.. better describe your code here.
Does this not work on the new version of react? I can not get this example working at all. Just returns "Cannot read property 'show' of undefined". Tried using the ref method as well as old method.