4. react 基础 - 编写 todoList 功能
编写 TodoList 功能
react 入口 js
#src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
ReactDOM.render(<TodoList />, document.getElementById('root'));
#src/TodoList.js
// Fragment 为占位符
import React, { Component , Fragment } from 'react';
class TodoList extends Component
{
render(){
// 每一个 render 的 标签 只能返回一个标签 其他的都包含在这个标签内
// 使用 Fragment 能 不然最外层元素 被渲染出来
return (
<Fragment>
<input type='text' /> <button>提交</button>
<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>
</Fragment>
);
}
} // 导出 TodoList
export default TodoList
//添加 input change 事件
# todoList.js
import React, { Component , Fragment } from 'react';
class TodoList extends Component
{
constructor( props ){
// 必须 调用一次 父类 constructor 完成父类初始化
super(props)
//对 需要使用的 数据 进行定义 ( 定义在 this.state 下 )
this.state = { inputValue: '' }
}
render(){
return (
<Fragment>
{/* 定义该 文本框的 值 为 this.state.inputValue , 改变事件为 this.inputChange 并制定 该事件的 this 为 TodoList 这个类 */}
<input type='text' value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
<button>提交</button>
<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>
</Fragment>
);
}
inputChange(e){
// 设置 this.state.inputValue 的 值 等于 输入的值
this.setState( {inputValue: e.target.value} );
}
} // 导出 TodoList
export default TodoList
//添加 列表 增加删除功能
import React, { Component , Fragment } from 'react';
class TodoList extends Component
{
constructor( props ){
// 必须 调用一次 父类 constructor 完成父类初始化
super(props)
//对 需要使用的 数据 进行定义 ( 定义在 this.state 下 )
this.state = { inputValue: '', list: [] }
}
render(){
return (
<Fragment>
{/* 定义该 文本框的 值 为 this.state.inputValue , 改变事件为 this.inputChange 并制定 该事件的 this 为 TodoList 这个类 */}
<input type='text' value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
{/* 添加点击事件 进行数据添加 */}
<button onClick={this.addClick.bind(this)}>提交</button>
<ul>
{
this.state.list.map((value, index)=>{
// 添加删除子项功能
return <li key={index} onClick={this.itemDelete.bind(this, index)}>{value}</li>
})
}
</ul>
</Fragment>
);
}
inputChange(e){
// 设置 this.state.inputValue 的 值 等于 输入的值
this.setState( {inputValue: e.target.value} );
}
addClick(){
// 点击之后 添加 输入框内的 value 到
this.setState({
list : [...this.state.list, this.state.inputValue],
inputValue: ''
})
}
itemDelete(index){
// 根据 immutable 原则 state 内的 数值 不允许我们 做任何改变
const list = [...this.state.list];
list.splice(index, 1);
this.setState({list:list});
}
} // 导出 TodoList
export default TodoList
