Yes, just make sure to attach that function to your React component (so you can access it via this) or use the function directly (search instead of this.search) if you intend to keep it global (or perhaps imported from a module).
I would say using it as an external function is easier:
renderForm: function() {
return (
<div className="form_div">
Movie search: <input type="text" className="query"></input>
<button onClick={search} className="submit">Search</button>
</div> /* ^------ search comes from a script that's loaded before this code so we can just call it */
);
}
It will also be a better approach if the logic within search is more general or unrelated to the components you're creating because it will provide you with looser coupling.
If the search depends on specific components (needs this binding), you'll need to attach it to your React components. The actual syntax depends if you're using ES6 classes or React.createClass.
One approach using classes is to create a wrapper method around the global search that will call it with the proper context:
class MyComponent extends React.Component {
constructor() {
// ...
}
search(...args) {
search.apply(this, ...args); // <--- Call the global search but bind `this` to the React component instance.
}
// now you can use this.search in renderForm
renderForm() { ... }
}
You could also attach search directly to the prototype of your component and not make the wrapper function:
class MyComponent extends React.Component {
// ...
// you can use this.search in renderForm because it will be found on the prototype
renderForm() { ... }
}
MyComponent.prototype.search = search; // <-- attach global search to the prototype of your component
As far as using React.createClass, you can just attach the reference to the global search to the object you pass in. Any functions that are called as methods on an object automatically have this set to that object:
var MyComponent = React.createClass({
search: search, // <-- attach global search to your component,
// now you can use this.search in renderForm because it is a method of your component
renderForm() { ... }
});
