阵营材料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完成。