Question

我对material-ui lib有一个问题，其中下拉列表和菜单不起作用。

我的代码如下。

import React from 'react';

import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import injectTapEventPlugin from 'react-tap-event-plugin';


class Interruptions extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
        value: 1
      };

      injectTapEventPlugin();
  }
  handleChange(event, index, value) {
    this.setState({value: value});
  }

  render(){
    return (
    <div className="interruptions__wrapper">
    <Toolbar>
     <ToolbarGroup firstChild={true}>
       <DropDownMenu value={this.state.value} openImmediately={true} onChange={this.handleChange}>
         <MenuItem value={1} primaryText="All Broadcasts" />
         <MenuItem value={2} primaryText="All Voice" />
         <MenuItem value={3} primaryText="All Text" />
         <MenuItem value={4} primaryText="Complete Voice" />
         <MenuItem value={5} primaryText="Complete Text" />
         <MenuItem value={6} primaryText="Active Voice" />
         <MenuItem value={7} primaryText="Active Text" />
       </DropDownMenu>
     </ToolbarGroup>
     <ToolbarGroup>
       <ToolbarTitle text="Options" />

     </ToolbarGroup>
   </Toolbar>
    </div>
    );
  }
}

export default Interruptions;

这是我在html中渲染应用程序的主要内容。

import React from 'react';
import ReactDOM from 'react-dom';
import Interruptions from '../components/Interruptions.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {red500} from 'material-ui/styles/colors';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';


const muiTheme = getMuiTheme({
  palette: {
    textColor: red500,
  }
});

const InterruptionsApp = () => (
  <MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
    <Interruptions />
  </MuiThemeProvider>
)


ReactDOM.render(<InterruptionsApp />, document.getElementById('myInterruptions'));

我使用openImmediately = {true}查看至少菜单是否显示（并且确实如此）但是当我尝试点击它再次打开它时它不会显示。

感谢您的建议。

Answer 1

@Jeff McCloud是对的。在第一次使用React-DOM的render函数之前，你应该注入DropEventPlugin（）我不知道你是如何构建你的应用程序webpack或browserify的？我也在这个问题上运行。确保您已将React，React-DOM，react-tap-event-plugin和您正在使用的所有React插件声明为外部库。我正在建立一个vendor.js 这种方法可以防止您在项目中使用多个版本的React，这也可能会产生这种行为。

材料ui下拉列表和其他控件无法正常工作

1 个答案: