javascript - 尝试更新状态内的对象但错误不允许我这样做？

Question

我有一个待办事项列表。我正在尝试实现一项功能，当待办事项悬停在(li 元素)上时，将出现一个删除按钮。但是，我可以让它工作的唯一方法是通过添加“Hover:false”状态并以这种方式更新它来更新主要状态，但这会使所有删除按钮都出现在悬停时。

我想要的是，例如，将鼠标悬停在第二个待办事项上，只有那个待办事项的删除按钮会出现，其余的保持隐藏状态。我如何将其实现到我的函数中？

到目前为止，这是我的代码

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

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

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

    hoverOff = () => {
      console.log("Not Hovering");
    }

    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,
          hover: false
        }],
        userInput: ''
      }
      )
    }

    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 {
            ...todos,
            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
      });
    };



    render() {
      return (

        < div className="test">
          <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}
                  className="list-group-item w-100"
                  onMouseEnter={(index) => this.hoverOn(index)}
                  onMouseLeave={(index) => this.hoverOff(index)}
                  onDoubleClick={(index) => this.handleEdit(index)}>
                  {todos.text}
                  <div class="delButton">
                    <button className={todos.hover ? "visable" : "notVisable"} onClick={(index) => this.handleDelete(index)}>Remove</button>
                  </div>
                </li>
            )
            )
            }

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

Answer 1

您可以使用 css 轻松创建此行为。给你的列表项和按钮一个类名，然后像这样:

.myButton {
     display: none;
 }

 .myListItem:hover > .myButton {
     display: block;
  }