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

Question

I am struggling with wrapping my head around sending information from an onClick event listener in my child component to my parent component. I am rendering an array of children, and I want each to have an event listener, so that onClick , the name of that child will be set as the "selected" parameter in my parent state.

This is my child component.

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

And this is my parent component:

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

I believe I have set up the child component correctly based on some examples I saw, however what is confusing me is how I should write the function in the parent that handles each child index, given that I am already mapping the array using my generateDropDown function. Ideally, I want to just modify the generateDropDown function, to include this functionality, but I am new to React and struggling to understand how to.

Answer 1

Here's an example of what you could change in your Dropdown component. Essentially, pass in a onClick handler to your children with some unique identifier bound to each. In this example, it is bound to the item.name because that is in your original code. You could use something else from the item object, though.

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