OnClick feuert nicht immer

Question

Ich begann mit einigen React/Redux + t7 zu spielen (um jede Art von transpiling zu vermeiden), aus Gründen des Lernens.

Als alles anfing, mir einen Sinn zu geben, stieß ich auf dieses voodooish Problem, wo die begrenzte onClick-Funktion manchmal feuert und manchmal nicht (?!) Wie Sie sehen können, klicken das Plus nicht immer Rufen Sie die gebundene Funktion auf onClick auf.

Ich verwende die neueste Version von Google Chrome (v53).

Was zur Hölle?

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

Ihre Click Veranstaltung arbeitet whenver Ihr Klick auf den glyphicon plus und nicht außerhalb. Das Problem ist, dass Sie die onClick Veranstaltung an der falschen Stelle platziert haben es vielmehr auf die button fügen als die span und es wird

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> 
     `; 
    }