首页 > 解决方案 > Material-UI MenuItems 选择后不显示

问题描述

I'm using material-ui and when selected the menuitems, it didn't show up but it changes the state. 这是我的代码

constructor(){
        super();
        this.state={
            amount: "",
        }

// Change amount of picture
        onAmountChange = (event) => {
            this.setState({ [event.target.name]: [event.target.value]})
        }

render(){
        const { classes } = this.props;
        const { amount  } = this.state;

        return(
            <div>
                <div>

                    <FormControl>
                        <InputLabel htmlFor="amount-pic">Amount</InputLabel>
                        <Select
                            value={amount}
                            onChange={this.onAmountChange}
                            name= 'amount'

                        >   
                            <MenuItem value={5}>5</MenuItem>
                            <MenuItem value={10}>10</MenuItem>
                            <MenuItem value={15}>15</MenuItem>
                            <MenuItem value={30}>30</MenuItem>
                            <MenuItem value={50}>50</MenuItem>
                        </Select>
                    </FormControl>
                </div>
                <br/>
            </div>


        );  
    }

没有显示错误,它可以改变状态量,当我选择时数字没有显示。

标签: reactjsmaterial-ui

解决方案


错误是你的函数onAmountChange:值是event.target.value,不是[event.target.value]。因为[event.target.value]是数组

onAmountChange = (event) => {
    this.setState({ [event.target.name]: event.target.value})
}

推荐阅读