React Material UI DropDown菜单不起作用

Question

我有一个组件来构建一个基于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完成。