react删除数组内的对象,画面表示不对

react做了一个简单的追加删除功能,两个button,
add在画面上加一个text控件,delete删除控件,

问题:追加text,放在数组里,删除的时候从第1个删除,但是实际删的是最后一个

代码如下

import React,{Component} from 'react';

var textList = [];

export default class Test extends Component {
    constructor(props){
        super(props);
        this.state = {
            children:[],
        }
        this.add = this.add.bind(this);
        this.delete = this.delete.bind(this);
    }
    add(){
        let length = this.state.children.length;
        textList.splice(this.state.children.length, 1, <input type="text" ref={(ref)=>this["text" + length] = ref}/>);
        this.setState({children : textList});
    }

    delete(){
        textList.splice(0,1);
        this.setState({children : textList});
    }

    render(){
        return(
        <div>
            <input type="button" onClick={this.add} value="add"/>
            <input type="button" onClick={this.delete} value="delete"/>
            <div id="div" ref={(ref)=>this.ref = ref}>
                {this.state.children}
            </div>
        </div>)
    }
}

追加后在文本框里写入012,点删除应该删除0的入力框,结果删除的是3
图片说明

2个回答

niuyulong101369
niuyulong101369 链接是splice的用法没弄懂吧,splice函数返回删除掉的元素
3 个月之前 回复

add 换成 push() delete 换成shift

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问