React.js: attach event von den Eltern an die Kinder

wie im Beispiel unten gezeigt, ich möchte MyComponent dynamisch anfügen eines "onClick" - Ereignis, um Ihre Kinder. Das onClick-Ereignis auslösen soll alertView, der sollte in der Lage sein zu nennen, das angeklickte element-Methode "getValue".

JSFiddle: http://jsfiddle.net/2g638bp8/

Wie dies zu tun? Dank

var MyComponent = React.createClass({
    alertValue: function () {
        //RETRIEVE THE CHILD HERE
        alert(child.getValue());
    },
    render: function () {
        var children = React.Children.map(this.props.children, function (c, index) {
            return React.addons.cloneWithProps(c, {
                ref: 'child-' + index
            });
        });
        return (
            <div>
                {children}
            </div>
        );
    }
});

var MySubComponent = React.createClass({
    getValue: function () {
        return this.props.val;
    },
    render: function () {
        return (
            <div>{this.props.val}</div>
        );
    }
});

React.render(
    <div>
        <MyComponent>
            <MySubComponent val="1" />
            <MySubComponent val="2" />
            <MySubComponent val="3" />
        </MyComponent>
    </div>,
    document.getElementById('container')
);
InformationsquelleAutor pistacchio | 2015-04-02
  1. 11

    Können Sie nicht rufen Methoden auf untergeordnete Komponenten Reagieren. Sie können nur die Eigenschaften festgelegt. (Die child ist eigentlich ein ReactElement enthält Informationen über die Klasse und den zugehörigen Eigenschaften. Es ist nicht eine Instanz der Komponente, die Sie erstellt haben).

    So, könnte man über diese ein etwas anders Weg und bewegen Sie den onClick zu den MySubComponent:

    var MyComponent = React.createClass({
    onHandleGiveValue: function (value) {
        alert(value);
    },
    render: function () {
        const children = React.Children.map(this.props.children, child => React.cloneElement(child, { onGiveValue: this.onHandleGiveValue.bind(this) }));
        return (
            <div>
                {children}
            </div>
        );
    }
});

var MySubComponent = React.createClass({
    handleClick: function() {
        this.props.onGiveValue(this.props.val);
    },
    getValue: function () {
        return this.props.val;
    },
    render: function () {
        return (
            <div onClick={ this.handleClick } >{this.props.val}</div>
        );
    }
});

React.render(
    <div>
        <MyComponent>
            <MySubComponent val="1" />
            <MySubComponent val="2" />
            <MySubComponent val="3" />
        </MyComponent>
    </div>,
    document.getElementById('container')
);

    Indem Sie das tun, kann Ihr code übergeben Sie den aktuellen Wert als ein event an die übergeordnete Komponente. Ich habe eine neue Veranstaltung aus der MySubComponent Klasse onGiveValue. Dass jetzt gerade geht der Wert von this.props.val. Aber, es könnte natürlich alles sein.

    • Vielen Dank für diese hilfreiche Antwort - ist es jetzt Wert aktualisiert Sie und Ihre Geige zu verwenden React.cloneElement statt..? (aufgrund cloneWithProps veraltet)
    • Danke @adarren, jetzt geändert.
    InformationsquelleAutor WiredPrairie
  2. 0
    1. Pass der Eltern Rückruf der Unterkomponente, man brauche eine Referenz für die untergeordnete Komponente.

    2. Reagieren bevorzugt Zusammensetzung design-Muster, So dass Ihre übergeordnete Komponente enthält diese drei Subkomponenten.
      JS Fiddle: http://jsfiddle.net/68vt3umg/

      var MyComponent = React.createClass({
handleChildClick: function (e, childValue) {
   alert(childValue);
},
render: function () {
    return (
        <div>
          <MySubComponent val="1" onSubClicked={this.handleChildClick}/>
          <MySubComponent val="2" onSubClicked={this.handleChildClick}/>
        </div>
    );
}});

var MySubComponent = React.createClass({
  getValue: function () {
    return this.props.val;
  },
  handleOnClick: function (e, value) {
    this.props.onSubClicked(e, this.props.val);
  },
  render: function () {
    return (
        <div onClick={this.handleOnClick}>{this.props.val}</div>
    );
  }
});

React.render(
  <div>
    <MyComponent />
  </div>,
  document.getElementById('container')
);
    • Wie ist diese anders als meine Antwort?
    • Es werden keine Kinder übergeben MyComponent was der OP wollte
    InformationsquelleAutor IcyBright
Schreibe einen Kommentar