在 preact 中重用“添加待办事项”组件作为“编辑待办事项”答案

【问题标题】：reusing the "add todo" component as "edit todo" in preact在 preact 中重用“添加待办事项”组件作为“编辑待办事项”
【发布时间】：2020-12-22 01:30:30
【问题描述】：

我刚刚从 w3 学校复制了 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 但传递点击编辑的 todo？

这是主要组件：

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>
  `;

【问题讨论】：

标签： javascript preact

【解决方案1】：

对于任何想知道的人，

在reducer之后添加了const：

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

然后将主editTodo的prop todo改为：

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

【讨论】：