使用父级中的子事件侦听器进行反应

Question

我正在竭尽全力地将信息从子组件中的onClick事件侦听器发送到父组件。 我正在渲染一个孩子数组，我希望每个孩子都有一个事件侦听器，以便在我的父状态下将该孩子的名称onClick设置为“ selected”参数。

这是我的孩子部分。

var DropDownLink = React.createClass({
  render: function(){
    var dropDownVisible;
    if (this.props.visible){
      dropDownVisible="dropdownoption"
    } else {
      dropDownVisible="dropdownoption hide"
    }
    return (
      <div onClick={this.props.onClick} className={dropDownVisible}>{this.props.name}</div>
    );
  }
});

这是我的父组件：

var Dropdown = React.createClass({
    getInitialState: function() {
        return {
            listVisible: false,
            selected: this.props.items[0].name,
        };
    },
    show: function() {
        this.setState({ listVisible: true });
        document.addEventListener("click", this.hide);
    },
    hide: function() {
        this.setState({ listVisible: false });
        document.removeEventListener("click", this.hide);
    },
    generateDropDown: function(item) {
        return <DropDownLink name={item.name} visible={this.state.listVisible}/>
    },
    render: function() {
        var items = this.props.items.map(this.generateDropDown);
        var dropdowncontain;
        if (this.state.listVisible) {
            dropdowncontain="dropdowncontainer";
        } else {
            dropdowncontain="dropdowncontainer hide";
        }
        return (
            <span className="roledropdown" onClick={this.show}>
                <span className="roleselected">{this.state.selected}</span>
                <i className="fa fa-caret-down clickdown"></i>
                <div className={dropdowncontain}>{items}</div>
            </span>
        )
    }
});

我相信我已经根据一些示例正确设置了子组件，但是令我感到困惑的是，鉴于我已经使用generateDropDown函数映射了数组，我该如何在处理每个子索引的父组件中编写函数。 理想情况下，我只想修改generateDropDown函数以包括此功能，但是我对React还是陌生的，并且难以理解如何使用。

Answer 1

这是您可以在Dropdown组件中进行更改的示例。 本质上，将onClick处理程序传递给您的孩子，每个孩子绑定一些唯一的标识符。 在此示例中，它绑定到item.name，因为它在原始代码中。 不过，您可以使用item对象中的其他内容。

handleChildClick: function(childName, event){
    // One of the DropDownLink components was clicked.
    // Handle that click here.
},

generateDropDown: function(item){
    return <DropDownLink name={item.name} onClick={this.handleChildClick.bind(item.name)} visible={this.state.listVisible}/>
},