react.js动态抓取对象导致未定义

Question

I am learning react.js. I have an object literal and I am trying to dynamically select an object within an object based upon what was chosen from a select input. I am getting undefined, however. I have tried both dot and bracket notation. I am successfully grabbing the value of selected option and storing it within a variable. Any ideas?

Here is my object:

var horoList = {
aries: {
    title: "JerkFace",
},
cancer: {
    title: "Cancerous",
},
gemini : {
    title: "GoofBall"
}
} ;

Here is some of my JSX within the render method:

                    <select name="pick-sign" onChange={this.handleChange}>
                        <option></option>
                        <option value="aries" >Aries</option>
                        <option value="cancer" >Cancer</option>
                        <option value="gemini" >Gemini</option>
                        <option value="taurus" >Taurus</option>
                    </select>

And here is my handle change method:

        handleChange: function(e) {
        var selectedHoro = e.target.value;
        console.log(selectedHoro); //outputs: aries
        console.log(horoList); //outputs: Object {aries: Object, cancer: Object, gemini: Object}
        console.log(horoList.aries); //ouputs: Object {title: "JerkFace"}
        console.log(horoList['selectedHoro']); //outputs: undefined
        // this.setState({
        //  horos: horoList.selectedHoro
        // });
    },

Answer 1

If you change this line:

console.log(horoList['selectedHoro']); //outputs: undefined

To:

console.log(horoList[selectedHoro]);

You should get the expected output. When you use horoList['selectedHoro'] , the literal string value selectedHoro is used so it would be horoList.selectedHoro . When you use horoList[selectedHoro] , selectedHoro is a variable and it's value is used to determine the property name you want to resolve so it would resolve to horoList.aeries (when selectedHoro === aeries ).