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

onClick不会一直触发

1 个答案: