niuyulong101369
niuyulong101369
采纳率0%
2019-12-23 16:54 阅读 391

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条回答 默认 最新

相关推荐