Reactjs 使用空值多次设置反应状态

我正在React中构建一个简单的Todo应用程序，以便更好地理解ReactJS

我面临的问题是，第一次单击“添加”按钮会将一个新项目添加到待办事项列表中，但第二次，它会将一个空白条目添加到新条目中。第三次将2个空白条目添加到状态。这样下去

要添加新元素的代码：

addTodo(){
    $("#newTodo").modal('open');
    $("#saveTodo").on("click", ()=>{
        console.log("Previous State: "+this.state.todoList);
        var text = $("#todoText").val();
        $("#todoText").val('');
        var newTodo = this.state.todoList;
        newTodo.push(text);
        this.setState({todoList: newTodo});
        console.log("Current State: "+this.state.todoList);
    });
}

---

这是我的代码的一部分。

简而言之。添加这一行

$("#saveTodo").off('click'); 

就在关闭对话框之前，由于您在

#save

上累积了事件处理程序，因此单击-每次都会越来越多地调用处理程序

---

必须指出的是，使用jquery和bootstrap模式，更不用说默认html，而不是react jsx，确实不是一个好的解决方案。对于exmaple解决方案，使用它可以更好地避免此类意外问题。

简而言之。添加这一行

$("#saveTodo").off('click'); 

就在关闭对话框之前，由于您在

#save

上累积了事件处理程序，因此单击-每次都会越来越多地调用处理程序

---

必须指出的是，使用jquery和bootstrap模式，更不用说默认html，而不是react jsx，确实不是一个好的解决方案。对于exmaple解决方案，使用它可以更好地避免此类意外问题。

您在

保存按钮上的单击事件将被调用两次，因此您会得到两个条目。您需要在单击事件上执行
.unbind（）
，并在单击保存按钮时关闭模式

$("#saveTodo").unbind().click(() => {
        console.log("Previous State: "+this.state.todoList);
        var text = $("#todoText").val();

        var newTodo = [...this.state.todoList];
  console.log(newTodo);
        newTodo.push(text);
  console.log(newTodo);
        this.setState({todoList: newTodo});
        console.log("Current State: "+this.state.todoList);
  $("#newTodo").modal("close")
    });

您在
保存按钮上的单击事件将被调用两次，因此您将获得两个条目。您需要在单击事件上执行
.unbind（）
，并在单击保存按钮时关闭模式

$("#saveTodo").unbind().click(() => {
        console.log("Previous State: "+this.state.todoList);
        var text = $("#todoText").val();

        var newTodo = [...this.state.todoList];
  console.log(newTodo);
        newTodo.push(text);
  console.log(newTodo);
        this.setState({todoList: newTodo});
        console.log("Current State: "+this.state.todoList);
  $("#newTodo").modal("close")
    });

非常感谢，我想知道为什么保存按钮在第一次第二次单击时被单击两次，在第三次单击时被单击三次，依此类推。如果你知道原因，请分享。单击+，你调用addTodo方法，每次它在#saveTodo上添加click事件，因此click事件会触发1次、2次、3次，依此类推。非常感谢，我想知道为什么第一次单击时会两次单击save按钮，第三次单击时会三次单击save按钮，依此类推。如果您知道原因，请分享。单击+，您将调用addTodo方法，并且每次它在#saveTodo上添加click事件，因此click事件将触发1次、2次、3次，依此类推。为避免插入空卡，您应使用$（“#todoText”）.val（“”）；从您的代码中。@LucasOliveira不起作用，它只添加相同的值，而不是空白值。为了避免插入空卡，您应该使用$（“#todoText”）.val（“”）；从您的代码中。@LucasOliveira这不起作用，它只添加相同的值，而不是空白值。