[Redux] Extracting Presentational Components -- AddTodo
2024-09-22 07:04:46
The code to be refactored:
let nextTodoId = 0;
class TodoApp extends Component {
render() {
const {
todos,
visibilityFilter
} = this.props;
const visibleTodos = getVisibleTodos(
todos,
visibilityFilter
);
return (
<div>
<input ref={node => {
this.input = node;
}} />
<button onClick={() => {
store.dispatch({
type: 'ADD_TODO',
text: this.input.value,
id: nextTodoId++
});
this.input.value = '';
}}>
Add Todo
</button>
<ul>
{visibleTodos.map(todo =>
<li key={todo.id}
onClick={() => {
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
});
}}
style={{
textDecoration:
todo.completed ?
'line-through' :
'none'
}}>
{todo.text}
</li>
)}
</ul>
<p>
Show:
{' '}
<FilterLink
filter='SHOW_ALL'
currentFilter={visibilityFilter}
>
All
</FilterLink>
{', '}
<FilterLink
filter='SHOW_ACTIVE'
currentFilter={visibilityFilter}
>
Active
</FilterLink>
{', '}
<FilterLink
filter='SHOW_COMPLETED'
currentFilter={visibilityFilter}
>
Completed
</FilterLink>
</p>
</div>
);
}
}
We extracting the Add todo input and button to a functional component, the functional components don't have instances. So we remove
this.input
Also I want it to be a presentational component and not specify behavior, so I just called the function called, "AddTodo," passing the current input value. I make on at click a prop so that the component that uses OnAddTodo can specify what happens when that button is clicked.
const AddTodo = ({
onAddTodo
}) => {
let input;
return (
<div>
<input ref={node => {
input = node;
}} />
<button onClick={() => {
onAddTodo(input.value);
input.value = '';
}}>
Add Todo
</button>
</div>
);
}
let nextTodoId = 0;
class TodoApp extends Component {
render() {
const {
todos,
visibilityFilter
} = this.props;
const visibleTodos = getVisibleTodos(
todos,
visibilityFilter
);
return (
<div>
<AddTodo
onAddTodo={ text =>
store.dispatch({
type: 'ADD_TODO',
id: nextTodoId++,
text
})
}
></AddTodo>
<ul>
{visibleTodos.map(todo =>
<li key={todo.id}
onClick={() => {
store.dispatch({
type: 'TOGGLE_TODO',
id: todo.id
});
}}
style={{
textDecoration:
todo.completed ?
'line-through' :
'none'
}}>
{todo.text}
</li>
)}
</ul>
<p>
Show:
{' '}
<FilterLink
filter='SHOW_ALL'
currentFilter={visibilityFilter}
>
All
</FilterLink>
{', '}
<FilterLink
filter='SHOW_ACTIVE'
currentFilter={visibilityFilter}
>
Active
</FilterLink>
{', '}
<FilterLink
filter='SHOW_COMPLETED'
currentFilter={visibilityFilter}
>
Completed
</FilterLink>
</p>
</div>
);
}
}
最新文章
- IOS定位
- 屏蔽zencart logs文件夹下不断生成的日志文件
- bootstrap插件学习-bootstrap.tooltip.js
- 在Eclipse中查看JDK类库的源代码
- Java TCP异步数据接收
- 引用的时候js不能使用虚拟路劲，调试时用排除法测试
- 有return的情况下try catch finally的执行顺序（最有说服力的总结）
- html5刮刮卡
- properties文件的继承(套用)关系
- [BZOJ 1047] [HAOI2007] 理想的正方形 【单调队列】
- What's New in C# 6.0(转)
- 【一天一道LeetCode】#328 Odd Even Linked List
- 在基于Windows系统的PHP虚拟主机上实现域名的301永久重定向
- zepto和jQuery on事件委托在苹果手机上的”坑“
- Tensorflow选择性初始化图中的变量
- git的使用方式总结
- 【Unity】通用的Debugger日志模块
- luogu P3198 [HNOI2008]遥远的行星
- Ubuntu学习总结-01 安装Ubuntu
- git——添加远程库