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

获取用户选择的值，您需要绑定onChange事件，如

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

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

不知道为什么你的列表出现了一秒钟。检查控制台，看看它是否显示任何错误。你可以尝试将你的材料包裹在

中

<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]
           }
      ]

   }
};

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

1 个答案: