5

反応コンポーネントに動的イベントをアタッチするのが困難です。次のコンポーネントがあります。

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 は「selector」に設定されています。この「セレクター」に基づいて、ノードにクエリを実行し、MyMixin でイベントを動的にアタッチします。

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

私はReactを初めて使用するので、私の考えはすべて間違っているかもしれません。

よろしく

4

1 に答える 1

6

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 は、属性がイベント名と正確に一致することを期待しています。サポートされているイベントの完全なリストを確認して、正しい名前を使用していることを確認してください。

于 2013-12-20T18:15:05.213 に答える