Question

我正在努力将我的子组件中的onClick事件监听器的信息发送到我的父组件。我正在渲染一个子数组，我希望每个都有一个事件监听器，以便onClick，该子项的名称将设置为＆＃34;选择＆＃34;我的父状态中的参数。

这是我的孩子组成部分。

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}/>
},

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

1 个答案: