子组件删除,defaultValue不变的问题

#1

初次发贴请大家多多关照…

场景简述：
使用react渲染一列表数据,每一行包含input框,使用defaultValue对其赋值; 每一行数据可以删除,

问题: 删除一行数据后 input的value不变.

EG:
subject 1 | 删除
subject 2 | 删除
subject 3 | 删除
…

当删除 subject 1 时,
期望结果为:
subject 2 | 删除
subject 3 | 删除
但实例结果为:
subject 1 | 删除
subject 2 | 删除

不知道大家对这种场景,有什么好的解决方法没有?
注：不希望使用value对input进行赋值,

附:简化的一个小例子,便于大家运行

var App = React.createClass({
mixins: [logMixin,StoreMixin(appStore)],

getInitialState(){
   return  {aa:0};
},

getDefaultProps(){
    return  {
        rowDatas:[{id:1,value:'subject 1 '},
            {id:2,value:'subject 2 '},
            {id:3,value:'subject 3 '},
            {id:4,value:'subject 4 '},
            {id:5,value:'subject 5 '}
        ]}
},

render() {
    var subRows=this.props.rowDatas.map((item,ii)=>{
        return <div><input defaultValue={item.value}   /><span onClick={this.delTest.bind(this,ii)}>删除</span></div>
    });

    return (<div>
         {subRows}
    </div>);
},

/**
 * 删除一个数据测试
 * @param arrayIndex
 */
delTest(arrayIndex){
    //删除一个数据测试
    this.props.rowDatas.splice(arrayIndex,1);
    this.setState({aa:this.state.aa++});
}

});

React.render(, document.body);

#2

props是只读数据结构
这样修改会坏掉的

#3

在return的这个virtualdom上面添加唯一标识的key，

return <div key={item.id}><input defaultValue={item.value}   /><span onClick={this.delTest.bind(this,ii)}>删除</span></div>

另外StoreMixin?

#4

嗯,谢谢指点，确实不应该这种写,，这只是写个小例子，实例上是使用 immutable 来存储数据的。

#5

谢谢胡大师 修正. 这样确实是可以正常运行的.
之前没理解，组件中key的作用,

关于StoreMixin 只能说 iflux V5

#6

:blush:看来是熟人嘛。

#7

同样问题，已解决，确实是key的问题，谢谢！