第3章 React基础精讲
本章通过TodoList功能的实现,给大家完整介绍React的基础语法,设计理念以及围绕React展开的一些编程思维。
3-1 使用React编写TodoList功能
将App改成TodoList
完成的效果:http://www.todolist.cn/
render()里的return返回必须为一个大标签即最外层只包含一个元素,可用占位符Fragment替换最外层标签(div),需要引入
// TodoList.js
import React,{ Component, Fragment } from 'react';
class TodoList extends Component {
render(){
return (
<Fragment>
<div>
<input />
<button>提交</button>
</div>
<ul>
<li>学英语</li>
<li>Learning React</li>
</ul>
</Fragment>
);
}
}
export default TodoList;
3-2 React 中的响应式设计思想和事件绑定
- React是响应式系统,不直接操作DOM,强调的是操作数据,通过数据的变化,自动感知数据自动的变化,生成DOM。
- 不需要关注DOM操作,只需要关注数据层的操作。
- 组件的状态:this.state
- JSX:变量用大括号
- 事件监听,input框数据改变:onChange={},需要绑定
- 状态改变通过setState
// TodoList.js
import React,{ Component, Fragment } from 'react';
class TodoList extends Component {
constructor(props){
super(props);
this.state = {
inputValue: 'hello!!!!!',
list: []
}
}
render(){
return (
<Fragment>
<div>
<input
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)}
/>
<button>提交</button>
</div>
<ul>
<li>学英语</li>
<li>Learning React</li>
</ul>
</Fragment>
);
}
handleInputChange(e){
// console.log(e); // e是事件对象
// console.log(e.target); // e.target 真正点击的目标,是真正触发事件的对象,DOM中的节点
// console.log(e.target.value); // 拿到新输入的内容
// this.state.inputValue = e.target.value; // this 指向undefined
// console.log(this); // undefined
// 要想this指向组件,需要事件绑定
// this.handleInputChange.bind(this) 改变input的指向,改变状态,不能通过引用的方式改变,可通过setState()
this.setState({
inputValue: e.target.value // 改变inputValue的值
})
}
}
export default TodoList;