zoukankan      html  css  js  c++  java
  • [Redux] Extracting Presentational Components -- AddTodo

    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>
        );
      }
    }
  • 相关阅读:
    AI生万物,新世界的大门已敞开
    荣耀10带来AI版WPS,玩转潮酷新功能
    P20 旅行助手,从未有过的至尊私人导游服务!
    如何成为快手尬舞王?HUAWEI HiAI了解一下!
    golang中的接口实现(二)
    golang中的接口实现(一)
    new~mac os 给终端命令写alias(及其他常用命令)及软连接
    Java面试题精选
    干货 unity小贴士
    js数组插入指定位置元素,删除指定位置元素,查找指定位置元素算法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5164218.html
Copyright © 2011-2022 走看看