Question

我需要使用Material UI

在模态弹出窗口中构建一个下拉菜单

我的模态窗口中有下拉菜单，作为一个值，我看到最后一项是“第三”，当我想选择例如“First”它不起作用时，菜单不会选择它并且仍然将最后一项作为菜单中的值

我有2个文件App.js和list.js

App.js代码：

import React, { Component } from 'react';
import './App.css';
import {AppButtons} from './components/button'
import {AppList} from './components/list'
import Dialog from 'material-ui/Dialog'
import FlatButton from 'material-ui/FlatButton'

export default class App extends Component {
    constructor (props) {
        super (props)
        this.state = {
            isModalOpen: false,
            itemsList: [
                {name: 'First'},
                {name: 'Second'},
                {name: 'Third'}
            ],
        }

        this.handleChange = this.handleChange.bind(this)
    }

    handleChange = () => this.setState({this.state.itemsList});

    render() {
        const actions = [
            <FlatButton
                label="Save"
                primary={true}
                onClick={() => this.setState({isModalOpen: false})}
            />,
            <FlatButton
                label="Cancel"
                primary={true}
                onClick={() => this.setState({isModalOpen: false})}
            />,
        ];
    return (
      <div className="container">
        <AppButtons
            openModal = {() => this.setState ({isModalOpen: true})}
        />
        <Dialog
            title="Numbers structure"
            actions={actions}
            open={this.state.isModalOpen}
            onRequestClose={() => this.setState({isModalOpen: true})}
        >
            <AppList
            items = {this.state.itemsList}
            />
        </Dialog>
      </div>
    );
  }
}

和list.js代码：

import React from 'react'
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';

const styles = {
    customWidth: {
        width: 200,
    },
};

export const AppList = (props) => {
    return (
<div>
    <DropDownMenu
       style={styles.customWidth}
       onChange={this.handleChange}
    >
        {props.items.map((item, key) => {
            return (
                <MenuItem
                          primaryText = {item.name}
                          openImmediately={true}
                          autoWidth={false}/>
            )
        })
        }
    </DropDownMenu>
    <br />
</div>
)
}

Here is the shot

Answer 1

这是因为您没有将handleChange函数作为道具传递给<AppList/>：

<AppList 
    items = {this.state.itemsList}
/>

将其更改为：

<AppList 
    items = {this.state.itemsList}
    handleChange={this.handleChange}
/>

然后在AppList组件中，Dropdown组件需要使用this.props.handleChange而不是this.handleChange：

<DropDownMenu
   style={styles.customWidth}
   onChange={this.props.handleChange}
>
    ...
</DropDownMenu>

Reactjs + material UI：下拉菜单不选择项目

1 个答案: