Reactjs Flux：从JSX中的子对象触发父方法

假设您有一个

下拉列表

React组件：

var Dropdown = React.createClass({
  render: function () {
    return (
      <div className="dropdown" />
    );
  },

  itemSelected: function (item) {
    this.setState({
      value: item.props.value
    });
  }
});

现在，假设您将这些组件一起使用，如下所示：

var ColorForm = React.createClass({
  render: function () {
    return (
      <div>
        <label>Pick a color</label>
        <Dropdown>
          <Option onSelect={???.itemSelected} value="red" />
          <Option onSelect={???.itemSelected} value="blue" />
          <Option onSelect={???.itemSelected} value="green" />
        </Dropdown>
      </div>
    );
  }
});

---

您可以使用

this.props.children

、

React.children.map

和

React.cloneWithProps

的组合，将

onSelect

属性添加到

下拉菜单中的子
选项
元素中：

var React = require('react/addons');

var Option = require('./Option');

var Dropdown = React.createClass({

  itemSelected: function (item) {
    this.setState({
      value: item.value
    });
  },

  render: function () {
    var self = this;
    var children = React.Children.map(this.props.children, function (child) {
      if (child.type !== Option.type) {
        return child;
      } else {
        return Reat.cloneWithProps(child, {
          onSelect: function () {
            self.itemSelected(this);
          }
        });
      }
    });

    return (
      <div className="dropdown">
        {children}
      </div>
    );
  }
});

请参阅单选按钮的类似代码：
谢谢@Wiktor——我添加了示例代码，以说明完成所需任务所需的知识组合。干杯~
var ColorDropdown = React.createClass({
  render: function () {
    return (
      <div className="dropdown">
        <Option onSelect={this.itemSelected} value="red" />
        <Option onSelect={this.itemSelected} value="blue" />
        <Option onSelect={this.itemSelected} value="green" />
      </div>
    );
  },

  itemSelected: function (item) {
    this.setState({
      value: item.props.value
    });
  }
});

var React = require('react/addons');

var Option = require('./Option');

var Dropdown = React.createClass({

  itemSelected: function (item) {
    this.setState({
      value: item.value
    });
  },

  render: function () {
    var self = this;
    var children = React.Children.map(this.props.children, function (child) {
      if (child.type !== Option.type) {
        return child;
      } else {
        return Reat.cloneWithProps(child, {
          onSelect: function () {
            self.itemSelected(this);
          }
        });
      }
    });

    return (
      <div className="dropdown">
        {children}
      </div>
    );
  }
});

var ColorForm = React.createClass({
  render: function () {
    return (
      <div>
        <label>Pick a color</label>
        <Dropdown>
          <Option value="red" />
          <Option value="blue" />
          <Option value="green" />
        </Dropdown>
      </div>
    );
  }
});