Question

我在React中做了一个待办事项清单。我设置了一些属性，以在添加待办事项时拉动。（文本，键和editMode）。

我试图将其设置为当我双击todo元素时，我双击的特定元素会进入编辑模式。为此，我设置了一个函数，当

元素的editMode属性设置为true时，它将变成要编辑的文本框。

但是，当我进行设置时，它会将所有

元素（待办事项）都变成了编辑模式，但我不知道如何具体选择单击的元素编辑模式。

如何用已有的代码实现这一目标？

import React from "react";
import { isTemplateElement, tsStringKeyword } from "@babel/types";

class TodoListt extends React.Component {
  state = {
    userInput: '',
    todos: [],
    editMode: false
  }

  handleChange(e, index) {
    this.setState({
      userInput: (e)
    })
    console.log(this.state.userInput)
  }


  handleSubmit(e, index) {
    e.preventDefault();
    const { todos, userInput } = this.state;
    this.setState({
      todos: [...todos, {
        text: userInput,
        key: Date.now(),
        editMode: false

      }],
      userInput: ''
    }
    )
  }

  handleDelete(index) {
    const todos = [...this.state.todos];
    todos.splice(index, 1);
    this.setState({
      todos
    })
  }

  handleEdit(index) {
    const todos = [...this.state.todos];
    console.log(todos.text)
  }

  render() {
    return (

      < div >
        <form onSubmit={(e) => this.handleSubmit(e)}>
          <input
            type="text"
            class="form-control mb-2"
            placeholder="enter a todo..."
            onChange={(e) => this.handleChange(e.target.value)}
            value={this.state.userInput}
          />
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>

        <ul class="list-group">

          {this.state.todos.map((todos, index) => (

            this.state.editMode[index] ?
              <div>
                <input type="text" defaultValue={todos.text} />
              </div>
              :


              <li
                key={todos.key}
                class="list-group-item"
                onDoubleClick={(index) => this.handleEdit(index)}>
                {todos.text}
                <div class="delButton">
                  <button class="btn btn-danger" onClick={(index) => this.handleDelete(index)}>Remove</button>
                </div>
              </li>
          )
          )
          }

        </ul>
      </div>
    )
  }
}
export default TodoListt;

Answer 1

您真的很亲密！我为您创建了一个沙箱：https://codesandbox.io/s/practical-cache-52k52

要使用todos对象，我们将使用map函数创建要编辑的todo的新实例。

import React from "react";
import { isTemplateElement, tsStringKeyword } from "@babel/types";

class TodoListt extends React.Component {
  state = {
    userInput: "",
    todos: [],
    editMode: false
  };

  handleChange(e, index) {
    this.setState({
      userInput: e
    });
  }

  handleSubmit(e, index) {
    e.preventDefault();
    const { todos, userInput } = this.state;
    this.setState(
      {
        todos: [
          ...todos,
          {
            text: userInput,
            key: Date.now(),
            editMode: false
          }
        ],
        userInput: ""
      },
      () => console.log(this.state)
    );
  }

  handleDelete(index) {
    const todos = [...this.state.todos];
    todos.splice(index, 1);
    this.setState({
      todos
    });
  }

  handleEdit(index) {
    const todos = [...this.state.todos];
    const updatedTodos = todos.map((todo, todoIndex) => {
      if (index == todoIndex) {
        return {
          ...todo,
          editMode: true
        };
      } else {
        return todo;
      }
    });
    this.setState(
      {
        ...this.state,
        todos: updatedTodos
      },
      () => console.log(this.state)
    );
  }

  handleUpdateChange = (e, index) => {
    const todos = [...this.state.todos];
    const updatedTodos = todos.map((todo, todoIndex) => {
      if (index == todoIndex) {
        return {
          ...todo,
          text: e.target.value
        };
      } else {
        return todo;
      }
    });
    this.setState({
      ...this.state,
      todos: updatedTodos
    });
  };

  handleUpdateSubmit(e, index) {
    e.preventDefault();
    const todos = [...this.state.todos];
    const updatedTodos = todos.map((todo, todoIndex) => {
      if (index == todoIndex) {
        return {
          ...todo,
          editMode: false
        };
      } else {
        return todo;
      }
    });
    this.setState(
      {
        ...this.state,
        todos: updatedTodos
      },
      () => console.log(this.state)
    );
  }

  render() {
    return (
      <div>
        <form onSubmit={e => this.handleSubmit(e)}>
          <input
            type="text"
            class="form-control mb-2"
            placeholder="enter a todo..."
            onChange={e => this.handleChange(e.target.value)}
            value={this.state.userInput}
          />
          <button type="submit" class="btn btn-primary">
            Submit
          </button>
        </form>

        <ul class="list-group">
          {this.state.todos.map((todos, index) =>
            this.state.editMode[index] ? (
              <div>
                <input type="text" value={todos.text} />
              </div>
            ) : todos.editMode ? (
              <form onSubmit={e => this.handleUpdateSubmit(e, index)}>
                <input
                  value={todos.text}
                  onChange={e => this.handleUpdateChange(e, index)}
                />
              </form>
            ) : (
              <li
                key={todos.key}
                class="list-group-item"
                onDoubleClick={() => this.handleEdit(index)}
              >
                {todos.text}
                <div class="delButton">
                  <button
                    class="btn btn-danger"
                    onClick={index => this.handleDelete(index)}
                  >
                    Remove
                  </button>
                </div>
              </li>
            )
          )}
        </ul>
      </div>
    );
  }
}
export default TodoListt;

如何为我的函数访问数组中的属性？

1 个答案: