函数组件 => 组件拆分

• TodoList.js

import React, {useState} from 'react';
import TodoItem from './TodoItem';

export default function TodoList() {

  const [list, setList] = useState([])
  const [inputValue, setInputValue] = useState('')

  function handleBtnClick() {
    setList([...list, inputValue])
    setInputValue('')
  }

  function handleInputChange(e) {
    setInputValue(e.target.value)
  }

  function handleDelete(index) {
    const newList = [...list]
    newList.splice(index, 1)
    setList(newList)
  }

  return (
    <div>
      <div>
        <input value={inputValue} onChange={handleInputChange}/>
        <button onClick={handleBtnClick}>add</button>
      </div>
      <ul>
        {
          list.map((item, index) => {
            return (
              <TodoItem 
                key={index} 
                index={index} 
                content={item} 
                delete={handleDelete}
              />
            )
          })
        }
      </ul>
    </div>
  )
}

• TodoItem.js

import React from 'react';

export default function TodoItem(props) {

  function handleDelete() {
    props.delete(props.index)
  }

  return (
    <li onClick={handleDelete}>{props.content}</li>
  )
}