javascript - 反应动态事件

Question

我很难将动态事件附加到我的反应组件。我有以下组件：

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>
        );
    }
});

如您所见，ListItem 的 className 设置为“选择器”。基于这个“选择器”，我想在 MyMixin 中查询节点并动态附加事件。

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

也许我的想法全错了，因为我对 React 还很陌生。

问候

Answer 1

您应该直接在 ListItem 组件上收听事件。React 不希望您稍后考虑附加侦听器。

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 期望属性与事件名称完全匹配。您可以查看受支持事件的完整列表，以确保使用正确的名称。