javascript - 如何使用 Material UI 在 React JS 中实现下拉菜单？

Question

我有一个下拉菜单，其中有一个嵌套菜单，如下所示。

展开后的下拉菜单显示两个选项:

问题是单击“租户名称”或“经销商 ID”下的子选项中的任何项目后会显示一秒钟并消失。如何解决这个问题，接下来是如何存储用户选择的值？

我的代码如下:

   export default class DropDownMenuSimpleExample extends React.Component {

 constructor(props) {
super(props);
this.state = {
  dropDownData: [
    {
      value: '',
      tenantName: '',
      dealerId: '',
    },
  ],
};
}

handleChange = (event, index, value) => {
    this.setState({ value });
    console.log(event, index, value);
 }

render() {
 return (

  <DropDownMenu
      style={styles.customWidth}
      anchorOrigin={{ horizontal: 'left', vertical: 'top' }}
      targetOrigin={{ horizontal: 'left', vertical: 'top' }}
      className={{ backgroundcolor: '#CFD8DC' }}

  >

    <MenuItem
        value={this.state.value}
        onChange={this.handleChange}
        primaryText="TENANT NAME"
        rightIcon={<ArrowDropRight />}
        menuItems={[
          <MenuItem value={100} primaryText="CA-CAR" />,
          <Divider />,
          <MenuItem value={101} primaryText="TEKION" />,
        ]}
    />

    <MenuItem
        value={this.state.value}
        onChange={this.handleChange}
        primaryText="DEALER ID"
        rightIcon={<ArrowDropRight />}
        menuItems={[
          <MenuItem value={1} primaryText="1" />,
          <MenuItem value={2} primaryText="2" />,
          <MenuItem value={3} primaryText="2" />,
          <MenuItem value={4} primaryText="4" />,
        ]}
    />
  </DropDownMenu>
  );
 }
}

Answer 1

要获取用户选择的值，您需要绑定(bind)一个 onChange 事件，例如

<SelectField  onChange={(evt,index,name) =>this.getOccasion(name) />

getOccasion()
{
this.setState({
//update to state
})
}

不知道为什么您的列表会出现一秒钟。检查控制台并查看它是否显示任何错误。您仍然可以尝试将您的 Material ui 组件包装在

<MuiThemeProvider>

但是你认为你错过了 webpack 中的一些加载器，这可能就是行为异常的原因

这是我的 webpack 配置看看是否有帮助

const postcssPlugins = [
  require('postcss-cssnext')(),
  require('postcss-modules-values')
];

const scssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' }
];

const postcssLoader = [
  { loader: 'style-loader' },
  { loader: 'css-loader', options: { modules: true } },
  { loader: 'postcss-loader', options: { plugins: () => [...postcssPlugins] } }
];

var path = require('path');

module.exports = {
          entry: './src/main/resources/static/js/app.js',
          output: {
            path: __dirname + '/src/main/resources/static/js', 
            filename: 'bundle.js' 
          },

  module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         },
         {
             test: /\.(scss|sass)$/,
             loader: scssLoader,
             include: [__dirname]
           },
           { test: /\.css$/,
             loader: postcssLoader,
             include: [__dirname]
           }
      ]

   }
};