React.js:将事件从父级附加到子级

React.js: attach event from parent to children

本文关键字：js 事件 React      更新时间：2023-09-26

如下面的示例所示，我希望MyComponent动态地将"onClick"事件附加到其子级。onClick事件应该触发alertView，它应该能够调用单击的元素方法"getValue"。

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

如何做到这一点？感谢

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

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

所以，你可以用一种稍微不同的方式来思考这个问题，并将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类创建了一个名为onGiveValue的新事件。目前，它只是传递this.props.val的值。但是，它当然可以是任何东西。

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

  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')
);
相关文章：