陣營材料UI下拉菜單不起作用

Question

我必須建立一個動態下拉基於URL的菜單是REST API組件：

組合組件代碼：

export default class Combo extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = {data: [], value: 0} 
    this.handleChange = this.handleChange.bind(this) 
    } 
    componentDidMount() { 
    // Fetch content 
    } 
    handleChange(event, index, value) { 
    this.setState({value: event.target.value}); 
    } 
    render() { 
    return (
     <MuiThemeProvider muiTheme={getMuiTheme()}> 
     <DropDownMenu style={styles.customWidth} onChange={this.handleChange}> 
      {this.state.data.map((row, i) => <ComboItem key={i} _id={row._id} label={row.name}/>)} 
     </DropDownMenu> 
     </MuiThemeProvider> 
    ) 
    } 
} 

export class ComboItem extends React.Component { 
    render() { 
    return (
     <MenuItem style={styles.customWidth} value={this.props._id} key={this.props._id} primaryText={this.props.label}/> 
    ) 
    } 
} 

在我index.js我已添加文件injectTapEventPlugin。

最後它顯示輸出，但是當我點擊一個項目時，如果下拉到所選項目（如正常選擇框），它將不會更改該值。

注意：onChange方法從未調用任何更改。

演示：

Answer 1

它看起來像你需要仍然需要通過this.state.value到DrowDownMenu組件作爲value道具：

<DropDownMenu 
    style={styles.customWidth} 
    value={this.state.value} 
    onChange={this.handleChange} 
> 
    {this.state.data.map((row, i) => <ComboItem key={i} _id={row._id} label={row.name}/>)} 
</DropDownMenu> 

編輯：

因爲你正在包裝你的MenuItem組件，您真正需要的功能onTouchTap傳遞給MenuItem S：

class ComboItem extends React.Component { 
    render() { 
    return (
     <MenuItem 
     value={this.props._id} 
     key={this.props._id} 
     primaryText={this.props.label} 
     onTouchTap={this.props.onTouchTap} 
     /> 
    ); 
    } 
} 

這通常是由Menu組件here完成。