リアクション状態がブランク値で複数回設定されています

Question

ReactJSをよりよく理解するためにReactでシンプルなTodoアプリケーションを構築しています。

私が直面している問題は、最初に追加ボタンをクリックすると新しい項目がTodo Listに追加されますが、もう一度に新しい項目が追加されます（）。 3回目には、の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クリックでイベントハンドラを蓄積しているため、ダイアログを閉じる直前に

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

この行を追加します - あなたは毎回、より多くのあなたのハンドラを呼び出す得ます。

jsxと反応する代わりに、jqueryとbootstrapのモーダルを使うのは実際には良い解決策ではなく、デフォルトのhtmlを使っています。このような予期しない問題を避けるために、例：react-modal解決策を使用する方がはるかに優れています。

Answer 2

save buttonのクリックイベントが2回呼び出されているため、2つのエントリが表示されます。あなたは、クリックイベントに.unbind()を行うと、あなたは$（「＃のtodoText」）の取るべき挿入空のカードを、避けるためにボタン

$("#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