2016-04-21 5 views
0
var monthSelections = { 
    "01": "January", 
    "02": "February", 
    "03":"March", 
    "04":"April", 
    "05": "May", 
    "06":"June", 
    "07":"July", 
    "08":"August", 
    "09":"September", 
    "10": "October", 
    "11":"November", 
    "12": "December", 
    "": "full year" 
}; 

und den Code:den Zustand der Drop-Down-Wert einzustellen Versuch

getInitialState(){ 
     return { 
     DropdownSelected: monthSelections["04"] 
     } 

    }, 
    handleDropDown(x){ 
     this.setState({DropdownSelected:x }); 

    } 


DropDown = React.createClass({ 
    render() { 
     return(
      <div className="dropdown "> 
      <button className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 

      {this.state.DropdownSelected} 

      <span className="caret"></span> 
      </button> 
      <ul className="dropdown-menu" aria-labelledby="dropdownMenu1" value={this.state.DropdownSelected}> 

      {Object.keys(monthSelections).map(function(month){ 
        return (
         <li ><a href="#" onClick={this.handleDropDown(monthSelections[month]) }> {monthSelections[month]} </a></li> 
        ); 

     }.bind(this)) 
     } 
     </ul> 
     </div> 
    ); 
    } 
}); 

Antwort

1

Das Problem ist hier, ich denke: onClick={this.handleDropDown(monthSelections[month]) Sie können keine Argumente geben, so Rückrufe. Sie können dies versuchen:

onClick={this.handleDropDown.bind(null, monthSelections[month])}.

+0

"TypeError: Kann Eigenschaft 'DropdownSelected' von null nicht lesen" – topazt

+0

Weil Sie keine 'state' Eigenschaft in Ihrer' DropDown' Komponente haben. Sie können lesen, wie 'React' Komponenten funktionieren [hier] (https://facebook.github.io/react/docs/tutorial.html) und [hier] (https://facebook.github.io/react/docs /dinking-in-react.html). {: MonthSelections [ "04"] } return { DropdownSelected}, handleDropDown (x) { this.setState – sehrob

+0

Als fix, können Sie 'getInitialState() setzen ({DropdownSelected: x}) ; } ' in Ihre' DropDown' Komponente – sehrob

Verwandte Themen