Dynamically adding behaviour to a react component

Question

I'm a React newbie, and I'm trying to figure out how to add functions conditionally to an element. In jquery, I might have the following code.

<div class="editor-container">
    <textarea id='editor'></textarea>
</div>

$(function(){
    $(document).on("keyup", "#editor", function () {
        // do something on editor keyup
    });
});

But at a later date I could drop in another js file with this code

$(function(){
    $(document).on("keyup", "#editor", function () {
        // do something additionally on editor keyup
    });
});

I can't figure out how to do this in React.

import React from 'react';    

export default class Editor extends React.Component {

  handleTextChange(e) {
    // do stuff with content
  }  

  render() {
    return (
      <div className="editor-container">
        <textarea 
           onChange={this.handleTextChange}>
        </textarea>
      </div>
    );
  }
}

As far as I can see, whatever I want to happen onChange I need to declare in advance. How do I add some kind of behaviour to a component after the fact?

update

I guess I didn't explain myself very well, so let me give a more general explanation of what I'd like to do.

My app will have an Editor component, but the editor is likely to have a ton of different features triggered from the keyup / keydown / change events. For instance, I'd like to have key sounds - when the user types, they'll get typewriter noises. However, I don't want to embed all the code for loading and playing sound files in the Editor component. I'd like to separate all that out to another file.

I'm guessing the simple answer is that I would put this in an invisible KeyDown component nestled within Editor, like so:

<div class="editor-container">
    <textarea id='editor'></textarea>
    <KeySounds />
</div>

But I'm not sure how to tie these other components into the keydown events - maybe I should be using some kind of event emitter?

As all component logic should be in thats component file, why not just edit the function in _Editor.js_ file? — Vucko, May 12 '17 at 21:55
This is an imperative approach. React is declarative. Take a look at this http://stackoverflow.com/questions/33655534/difference-between-declarative-and-imperative-in-react-js — forgng, May 12 '17 at 22:14
adding stuff dynamically, and "adding another js file at a later date" are completely different things. What are you trying to do? — azium, May 13 '17 at 00:00
@azium I'm essentially trying to separate out my logic in a better way. I'll edit the question and elaborate — roryok, May 13 '17 at 06:58
@vucko I guess I'm trying to decide what's component logic and what is not. I have tons of stuff that really feels like it doesn't belong in `Editor.js` — roryok, May 13 '17 at 07:11

score 0 · Answer 1 · answered May 13 '17 at 14:11

If you are building a complex app (such as an editor) I would recommend looking at ways to manage your application state. There are quite a few ways to do it (internal state, Flux, Redux...).

In your particular example I would look into using Redux to dispatch events. So your onKeyUp function should simply trigger an action, which would dispatch an event. Then you could add event listeners your app in a similar way you do this with jQuery.

score 0 · Answer 2 · answered May 14 '17 at 07:05

As far as I can see, whatever I want to happen onChange I need to declare in advance. How do I add some kind of behaviour to a component after the fact?

you can declare it in advance and if it doesnt exists, will be undefined, so if this comes from an upper component, you can change that value, it will trigger a rerender, if in some moment exists, you will be calling whatever onChange

Dynamically adding behaviour to a react component

update

2 Answers2