Question

因此，我尝试使用true和false布尔值来在react中呈现待办事项列表的编辑按钮。

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

现在，当用户单击“编辑”时，它将显示renderEdit（）页面，但是所有列表也都显示了文本形式。

这是我认为是问题所在的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>
      ); 
}

将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>
    );
  }

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

1 个答案: