onClickは常に発火しません

Question

学習のため、React/Redux + t7を使って遊ぶようになりました（蒸散を避けるため）。

いつも私には意味があるようになってきましたが、このような問題を抱えていました。ここでは、onClick関数は時々発生し、時には発生しません（？！） ご覧のとおり、 onClickにバインドされた関数を呼び出します。

Google Chrome（v53）の最新バージョンを使用しています。

何ですか？

JS

'use strict'; 

const store = Redux.createStore(Redux.combineReducers({ 
    todos: (state = [], action) => { 
    switch(action.type) { 
     case 'ADD_TODO': 
     return state.concat([action.payload]); 
     default: 
     return []; 
    } 
    } 
})); 

t7.module((t7) => { 
    t7.assign("AddTodo", React.createClass({ 
    addTodo() { 
     console.log('clicked'); 
     return store.dispatch({ 
     type: 'ADD_TODO', 
     payload: { 
      text: this.refs.todoText.value, 
     } 
     }) 
    }, 
    render() { 
     return t7` 
     <div className="row"> 
      <div className="col-xs-4 form-group-lg"> 
      <input className="form-control" ref="todoText"/> 
      </div> 
      <div className="col-xs-2"> 
      <button className="btn btn-lg btn-info"> 
       <span className="glyphicon glyphicon-plus" 
        onClick="${this.addTodo}" 
        style=${{fontSize: 'large'}}> 
       </span> 
      </button> 
      </div> 
     </div> 
     `; 
    } 
    })); 

    t7.assign("TodoList", React.createClass({ 
    render() { 
     return t7` 
     <div className="row"> 
      <div className="col-xs-12"> 
      <ul> 
       ${store.getState().todos.map((todo, i) => t7` 
       <li key=${i}>${todo.text}</li> 
       `)} 
      </ul> 
      </div> 
     <div> 
     `; 
    } 
    })); 

    const render =() => ReactDOM.render(
    t7` 
     <div className="container"> 
     <div className="jumbotron"> 
      <h1>Todos</h1> 
     </div> 
     <AddTodo /> 
     <TodoList /> 
     </div> 
    `, document.getElementById('root') 
); 

    store.subscribe(render); 
    render(); 
}); 

Answer 1

あなたClickイベントが働きwhenver glyphicon plusはなく、それ外にあなたのクリック。問題は、あなたが間違った場所でonClickイベントを置いbuttonではなくspanに追加し、それが

render() { 
     return t7` 
     <div className="row"> 
      <div className="col-xs-4 form-group-lg"> 
      <input className="form-control" ref="todoText"/> 
      </div> 
      <div className="col-xs-2"> 
      <button className="btn btn-lg btn-info" onClick="${this.addTodo}"> 
       <span className="glyphicon glyphicon-plus" 

        style=${{fontSize: 'large'}}> 
       </span> 
      </button> 
      </div> 
     </div> 
     `; 
    }