レンダリングに反応する+アイテムの現在のリストを削除する(完全なコードを添付)

結果は:
ここに画像を挿入説明
コードのショー:

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],
        })
    }
    // 删除当前项
    deleteItem = (idx) =>{
        console.log(idx)
        let list = this.state.list;
        list.splice(idx,1);
        this.setState({
            list
        })
    }
    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}<button onClick={()=>this.deleteItem(idx)}>删除</button></li>
                            )
                        })
                    }
                </ul>
            </>
        )
    }
}
export default AddMenu
公開された15元の記事 ウォンの賞賛0 ビュー273

おすすめ

転載: blog.csdn.net/qq_39721418/article/details/104093635