使用渲染功能为 todo 添加新任务 react

Question

所以我尝试使用 true 和 false 布尔值来呈现我的待办事项列表的编辑按钮。

我的想法是如果单击编辑按钮 -> 编辑 == true -> 显示渲染编辑（）。如果编辑为假，则显示 renderNormal()。

现在，当用户单击编辑时，它会显示 renderEdit() 页面，但是，所有列表也显示 textform.. 查看图片

这是我认为是问题的 renderEditing() 代码...

renderEditing() {
    return (
        <div>
          <h1>My awesome todo list</h1>
          <label htmlFor="newTodoDescription">Add Todo</label>
          <input
            type="text"
            value={this.state.newTodoDescription}
            name="newTodoDescription"
            id="newTodoDescription"
            onChange={this.handleOnChange}
          />
          <button onClick={this.handleAddTodo}>+</button>

          <ul>
          {this.state.todos.map(todo => {

            return (
              <li
                onClick={() => this.handleTodoClick(todo)}
                id= {todo.id}
                >

                {todo.description}

      <textarea ref ="editTodoDescription"
defaultValue = {this.state.todo}
name= "editTodoDescription"
id ="editTodoDescription"
></textarea>


                <button onClick={() => this.handleSave(todo)} > save 
</button>          
</li>


            );
          }

          )
          }
          </ul>


        </div>
      ); 
}

更新了 todo 的 textarea 值，但是当我单击一个按钮的编辑时，仍然显示两个...

Answer 1

this.state.todo 不存在。只需将 defaultValue 设置为 todo

  renderEditing() {
    return (
      <div>
        <h1>My awesome todo list</h1>
        <label htmlFor="newTodoDescription">Add Todo</label>
        <input
          type="text"
          value={this.state.newTodoDescription}
          name="newTodoDescription"
          id="newTodoDescription"
          onChange={this.handleOnChange}
        />
        <button onClick={this.handleAddTodo}>+</button>

        <ul>
          {this.state.todos.map(todo => {
            return (
              <li onClick={() => this.handleTodoClick(todo)} id={todo.id}>

                <textarea
                  ref="editTodoDescription"
                  defaultValue={todo.description}
                  name="editTodoDescription"
                  id="editTodoDescription"
                />

                <button onClick={() => this.handleSave(todo)}> save</button>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }