class App extends React.Component { //定义组件，继承父类
constructor() {//constructor 是和 class 一起用来创建和初始化对象的特殊方法。
super()//在装载组件(mounting)之前调用会React组件的构造函数。当实现React.Component子类的构造函数时，应该在任何其他语句之前调用super(props)
this.state = {//设置初始状态
todos: []
}
}
// 绑定键盘回车事件，添加新任务
handlerKeyUp(e) {
if(e.keyCode == 13) {
let value = e.target.value;
if(!value) return false;
let newTodoItem = {
text: value,
isDone: false
};
e.target.value = '';
this.state.todos.push(newTodoItem)
this.setState({todos: this.state.todos}); //修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。
}
}
render(){
return (
<div className="todo-input">
<input type="text" placeholder="请输入待办事项" onKeyUp={this.handlerKeyUp.bind(this)}/>
<ul>
{this.state.todos.map((todo,index) => {{
return (
<li key={index}>{todo.text}</li>//Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
)
}})}
</ul>
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
react
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- React：React 是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。React...
- React:是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页React.js:是在R...
- react-ele-webapp 项目地址 ：https://github.com/kliuj/react-ele...
- React： React 是基础框架，是一套基础设计实现理念，开发者不能直接使用它来开发移动应用或者网页。 Rea...
- 作者：沈嵘链接：https://www.zhihu.com/question/29165419/answer/47...
