React.js：将事件从 parent 附加到 children

Question

如下例所示，我希望 MyComponent 动态附加一个 "onClick" 事件到它的 children。 onClick 事件应该触发 alertView，它应该能够调用被点击的元素方法 "getValue".

如何做到这一点？谢谢

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

Answer 1

您不能在 React 中调用子组件的方法。您只能设置属性。（child 实际上是一个 ReactElement，其中包含有关 class 和相关属性的信息。它不是您创建的组件的实例）。

因此，您可以考虑这种 slightly different 方式并将 onClick 移动到 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')
);

通过这样做，您的代码可以将当前值作为事件传递给父组件。我从 MySubComponent class 创建了一个名为 onGiveValue 的新活动。现在只是传递 this.props.val 的值。但是，它当然可以是任何东西。

Answer 2

将父回调传递给子组件，子组件不需要引用。

React 更喜欢组合设计模式，所以你的父组件应该包含这三个子组件。 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')
);

React.js：将事件从 parent 附加到 children

React.js: attach event from parent to children

javascript

reactjs