CODEWITHSUNDEEP
javascripthtmlreactjs
Zarkaylia
Zarkaylia

Reputation: 71

Call Javascript function in .js file with React from HTML file

I haven't found this specific question so here it is:

Say I have an HTML file. In this HTML file I have some React-classes and functions in the body-element. One function is for rendering a form. Like this for example:

renderForm: function() {
      return (
      <div className="form_div">
        Movie search: <input type="text" className="query"></input>
        <button onClick={this.search} className="submit">Search</button>
      </div>
    );
  },

Now. I also have a .js file. In this file I have a finished function "Search" to handle the user input and pass on to database/API/what I want to search through. It is a rather large function.

Can I call the Search function in this .js file with the React-code in my HTML-file?

The goal is to handle rendering with React, functionality with JS.

Is this possible (I'm not asking whether it's good practice or not)?

Upvotes: 1

Views: 4985

Answers (2)

nem035
nem035

Reputation: 35501

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() { ... }
});

Upvotes: 1

Matt Spinks
Matt Spinks

Reputation: 6700

Of course it's possible. That's very common and good practice to separate the functionality. Just make sure to include your js file in your html file.

Upvotes: 1

Related Questions