Calling a React component's methods from outside of React. Demo https://plnkr.co/edit/E6lPrL331KGxoikGinFm?p=preview
<!DOCTYPE html> | |
<html> | |
<head> | |
<script data-require="jquery@3.1.1" 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="bootstrap@4.0.5" 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="bootstrap@4.0.5" 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> | |
); | |
} | |
}; |
This comment has been minimized.
This comment has been minimized.
baffleinc
commented
Jul 3, 2018
This is awesome. Thank you! |
This comment has been minimized.
This comment has been minimized.
tonthanhhung
commented
Jul 4, 2018
hi @yzorg, @baffleinc could you help to explain how to use the |
This comment has been minimized.
This comment has been minimized.
bramchi
commented
Jul 6, 2018
•
@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 comment has been minimized.
This comment has been minimized.
littlefroginnovations
commented
Feb 8, 2019
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
yzorg commentedJan 25, 2018
Consider using
ref={(component) => window.translator = component; }
instead ofvar translator = ReactDOM.render(...);
According to React 16 docs the later is incompatible with async rendering and will be deprecated in the future.