react中的列表渲染（附完整代码）

效果展示：

代码展示：

import React,{Component} from 'react';
/**
 * 增加菜单组件
 */
class AddMenu extends Component{
    constructor(props){
        super(props)
        this.state = {
            inputVal:'',
            list:['西红柿','菜花']
        }
    }
    changeInputVal = (e) =>{
        this.setState({
            inputVal:e.target.value
        })
    }
    toAddMenu = () =>{
     /**
        var oldList = this.state.list;
        var newList = oldList.concat(this.state.inputVal)
        this.setState({
            list:newList,
            inputVal:''
        })
        **/
		// 也可以使用es6的扩展运算符
		this.setState({
            list:[...this.state.list,this.state.inputVal],
        })
    }
    render(){
        return(
            <>
                <div>
                    <input type="text" placeholder="请输入要添加的菜名" value={this.state.inputVal} onChange={this.changeInputVal} />
                    <button onClick={this.toAddMenu}>增加菜名</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,idx)=>{
                            return(
                                <li key={idx}>{item}</li>
                            )
                        })
                    }
                </ul>
            </>
        )
    }
}
export default AddMenu