新手自己写的TodoList，有些问题麻烦大伙给看看

#1

现在的问题是感觉逻辑写的有些混乱，但也不知道怎么改好，还有一个报错不知道为啥，但不影响运行！现在实现了增删改

<div id="box"></div>
<script type="text/babel">
var f = true;
var delIndex = null;
var oBtn = null;
var nextItems = '';
var nextText = '';

var TodoList = React.createClass({
	handleDel: function(e){
		delIndex = e.target.getAttribute('data-key');
		this.props.onDel(delIndex);
	},
	handleUpdate: function(e){
		f = false;
		oBtn = document.getElementById('btn');
		oBtn.innerHTML = '确定';
		delIndex = e.target.getAttribute('data-key');	
		//this.props.cont.value = this.props.item[delIndex].text;
		this.props.onUpdate(delIndex);
	},
	render: function(){
		var createItem = function(item, i){
			return <li key={item.id}><label>{item.text}</label><button onClick={this.handleDel} data-key={i}>删除</button><button onClick={this.handleUpdate} data-key={i}>修改</button></li>;
		}.bind(this);
		return <ul>{this.props.item.map(createItem)}</ul>;
	}
});

var TodoApp = React.createClass({
	getInitialState: function(){
		return {
			items : [],
			text : ''
		};
	},
	onChange: function(e){
		e.preventDefault();
		if(f){
			this.setState({
				text : e.target.value.trim()
			});
		}else{
			this.setState({
				text : this.refs.content.value
			});	
		}
		
	},
	onDel: function(index){
		console.log(index);
		this.state.items.splice(index, 1);
		this.setState({
			items : this.state.items
		});
	},
	onUpdate: function(index){
		this.refs.content.value = this.state.items[index].text;
	},
	onSubmit: function(e){
		e.preventDefault();
		if(this.state.text == ''){
			alert('添加内容不能为空');
			return;
		}
		if(f){
			var nextItems = this.state.items.concat({ text: this.state.text, id: Date.now() });
			
			this.setState({
				items : nextItems,
				text : nextText
			});
		}else{
			console.log(this.state.items);
			this.state.items.splice(delIndex, 1, { text: this.state.text, id: Date.now() });
			
			this.setState({
				items : this.state.items,
				text : nextText
			});
			oBtn.innerHTML = '添加第'+(this.state.items.length+1)+'条';
			f = true;
		}
		
	},
	render: function(){
		return (
			<div>
				<h3>TodoList</h3>
				<TodoList item={this.state.items} onDel={this.onDel} onUpdate={this.onUpdate} text={this.state.text}  />
				<form onSubmit={this.onSubmit}>
					<input type="text" onChange={this.onChange} value={this.state.text} ref="content" />
					<button id="btn">添加第{this.state.items.length+1}条</button>
				</form>
			</div>
		);
	}
});

ReactDOM.render(<TodoApp />, document.getElementById('box'));
</script>
#2

什么报错?

#3

说是react.min.js中，
我添加修改后在删除就会爆这个错误，直接删除不会！

#4

能加你Q不？帮忙给看下？

#5

论坛上就好了, 不过这个问题我也没遇到过. 一般 textContent null 是设置的节点不存在, 很奇怪, 贴代码上来看看.

#6

帖子里面有代码，能看到吗？可以放html文件里跑一下！
用到的几个线上cdn文件：

添加项目后修改它然后再删除，就会报这个错误！

#7

很久了，今天翻出来这段代码还是会报错！添加项目后修改它然后再删除，就会报这个错误！
Uncaught TypeError: Cannot set property ‘textContent’ of null

#8

这都过了多久了，还在script里写react代码

#9

这就是个练习，碰到了一些疑惑