Question

我正在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);
    });
}

以下是我的代码的Codepen Link。

Answer 1

save button上的点击事件被调用两次，因此您会收到两个条目。您需要在点击事件上执行.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")
    });

<强> CODEPEN

Answer 2

简而言之。添加此行

 `FOR /R %x IN (*) DO ren "%x" Suf_*`

在你关闭对话框之前，因为你在$("#saveTodo").off('click');点击时累积了事件处理程序 - 你每次都会越来越多地调用你的处理程序。

必须要说的是，使用jquery和bootstrap模式真的不是很好的解决方案，而不是默认的html，而不是反应jsx。对于例如react-modal解决方案，使用更好的方法是避免出现这种意外问题。

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

2 个答案: