React dynamic events

Question

I have difficulties to attach dynamic events to my react components. I have the following components:

var ListItem = React.createClass({
    render: function() {
        return (
            <li className="selector" >
                <div className="column">
                    <h2 className="commentAuthor">
                        {this.props.author}
                    </h2>
                    <div>{this.props.children}</div>
                </div>
            </li>
        );
    }
});

var ListBox = React.createClass({
    mixins : [MyMixin],

    render : function() {
        this.nodes = this.props.data.map(function(item) {
            return <ListItem author={item.author}>{item.text}</ListItem>;
        });
        return (
            <ul id="columns">
                {this.nodes}
            </ul>
        );
    }
});

As you see the ListItem has className set to "selector". Base on this "selector" I want to query nodes and attach dynamically events in the MyMixin.

React.renderComponent(
    <ListBox data={data} selector="li.selector" />,
    document.getElementById('example')
);

Maybe my idea is all wrong as I'm fairy new to React.

Regards

Ross Allen · Accepted Answer · 2013-12-20 18:15:05Z

6

You should listen to events directly on the ListItem component. React doesn't want you to think about attaching listeners later.

var ListItem = React.createClass({
    handleClick: function(event) {
      // Handle ListItem click
    },
    handleDoubleClick: function(event) {
      // Handle ListItem double click
    },
    render: function() {
        return (
            <li className="selector"
                    onClick={this.handleClick}
                    onDoubleClick={this.handleDoubleClick}>
                <div className="column">
                    <h2 className="commentAuthor">
                        {this.props.author}
                    </h2>
                    <div>{this.props.children}</div>
                </div>
            </li>
        );
    }
});

React expects the attributes to exactly match the event name. You can check out the full list of supported events to make sure you use the right names.

answered Dec 20, 2013 at 18:15

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jared Forsyth Over a year ago

yup, if you find yourself wanting to "query", it's likely not the react way

user732456 Over a year ago

I came up to this solution also. The only difference is that I moved all event handlers to mixin as I want to share the implementation across different components.

Ross Allen Over a year ago

Be careful of modifying Components' APIs with Mixins. If the Mixin adds new methods to the Component, it can be difficult to reason where functionality lives. I suggest implementing only lifecycle methods, like componentWillMount, in Mixins.

Collectives™ on Stack Overflow

React dynamic events

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related