Question

如下例所示，我希望MyComponent动态地将“onClick”事件附加到其子节点。 onClick事件应该触发应该能够调用被点击的元素方法“getValue”的alertView。

怎么做？感谢

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，其中包含有关类和相关属性的信息。它不是您创建的组件的实例。

所以，你可以用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的{{1}}类创建了一个新事件。现在只是传递onGiveValue的值。但是，它当然可以是任何东西。

Answer 2

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

React优先选择合成设计模式，因此您的父组件应包含这三个subComponent。 JS小提琴：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：将父级的事件附加到子级

2 个答案: