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

问题描述

我刚刚从 w3 学校复制了待办事项，并使用 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>
  `;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascript preact