javascript - 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只要您点击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>
      `;
    }