在 preact 中重用 "add todo" 组件作为 "edit todo"

Question

我刚刚从 w3 schools 复制了 todo 并使用 preact 添加了一些功能。到目前为止，所有功能组件都可以正常工作。不要介意字符串文字和内联样式。

我没有得到的是：

我有用于添加待办事项的空“表单”：

    const EditTodo = (props) => {
    return html`
      <h2 style="margin:5px;">My To Do List</h2>
      <input ref=${todoTitleRef} type="text" placeholder="Title..." value=${props.todo.title}/>
      <textarea value=${props.todo.content} ref=${todoContentRef} style="margin-top: 20px;" type="text" id="myText" placeholder="Text..."></textarea>
    `;
  }

我想重新使用它来编辑待办事项。所以我的问题是：我如何在根组件中添加一个钩子来重新渲染 EditTodo 但传递被点击编辑的待办事项？

这是主要成分：

return html`
  <div class="app">
    <div id="myDIV" class="header">
      ${html`<${EditTodo} todo=${{}}/>`}
      <div style="margin-top: 40px;"><span class="addBtn" onClick=${addTodo}>Add</span></div>
    </div>
    <ul id="myUL">
      ${todos.map((todo) => html`<${TodoItem} todo=${todo}/>`)}
    </ul>
  </div>
  `;

Answer 1

对于任何想知道的人，

在 reducer 后面添加了 const:

  const editingTodo = todos.filter(todo=>todo.isEditing);

然后将主 editTodo 的 prop todo 更改为：

  ${html`<${EditTodo} todo=${editingTodo.length>0?editingTodo[0]:{}}/>`}

在 preact 中重用 "add todo" 组件作为 "edit todo"

reusing the "add todo" component as "edit todo" in preact

javascript

preact