onClick在任何時候都不會觸發

Question

爲了學習，我開始玩一些React/Redux + t7（爲了避免任何類型的轉譯）。正如你所看到的，點擊加號按鈕並不總是如此（如果有的話），點擊加號按鈕並不總是如此調用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> 
     `; 
    }