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

Question

我只是从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>
  `;

Answer 1

对于任何好奇的人来说，

在reducer后面添加const：

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

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

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