将输入框组件化，通过事件将数据提交给父组件，实现追加代办项到待办清单中

将输入框组件化并实现数据传递通常在单页应用（SPA）或组件化的前端开发中非常常见。你可以创建一个独立的输入框组件，这个组件通常会有输入功能以及一个“提交”按钮。当用户在输入框中输入内容并点击提交时，可以触发一个内部的事件，比如`onInputChange`或`onClickSubmit`。

在这个事件处理器中，我们可以获取到输入框的内容，并使用props或者自定义事件的方式将其数据传递给父组件。例如，在React中，你可以这样做：

// 输入框组件 (InputBox.js)
import React from 'react';

const InputBox = ({ onAddItem }) => {
  const handleChange = (event) => {
    const newItem = event.target.value;
    // 触发事件并将数据提交
    onAddItem(newItem);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} />
      <button onClick={handleChange}>添加</button> {/* 或者直接使用 "onAddItem()" */}
    </div>
  );
};

export default InputBox;

// 父组件 (TodoList.js)
import React, { useState } from 'react';
import InputBox from './InputBox';

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addItem = (newItem) => {
    setTodos([...todos, newItem]);
  };

  return (
    <div>
      <h1>待办事项</h1>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <InputBox onAddItem={addItem} /> {/* 使用addItem函数作为回调 */}
    </div>
  );
};

export default TodoList;

在这个例子中，每当从InputBox组件提交新数据，父组件TodoList会接收到并更新自身的状态，从而实现在待办事项列表中追加新的项目。