Webpack-dev-server with redux和react阻塞了我的输入

应用程序可访问此URL: http://91.142.210.160:3000/webpack-dev-server/

正如你所看到的，应用程序没有错误，但我不能真正点击文本输入并添加待办事项。

下面我会给你看我的文件，如果你需要更多的文件，请在评论中写下。

//app.js

import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from './reducer';
import { TodoList } from './containers';
//                          ^^^^^^^^^^
const store = createStore(reducer);
render(
  <Provider store={store}>
    <TodoList />
  </Provider>,
  document.getElementById('app')
);

//Components.js

import React from 'react';
export function Todo(props) {
  const { todo } = props;
  if(todo.isDone) {
    return <strike>{todo.text}</strike>;
  } else {
    return <span>{todo.text}</span>;
  }
}
export function TodoList(props) {
  const { todos, toggleTodo, addTodo } = props;
  const onSubmit = (event) => {
    const input = event.target;
    console.log("input", input);
    const text = input.value;
    const isEnterKey = (event.which == 13);
    const isLongEnough = text.length > 0;
    if(isEnterKey && isLongEnough) {
      input.value = '';
      addTodo(text);
    }
  };
  const toggleClick = id => event => toggleTodo(id);
  return (
    <div className='todo'>
      <input type='text'
             className='todo__entry'
             placeholder='Add todo'
             onKeyDown={onSubmit} />
      
      <ul className='todo__list'>
        {todos.map(t => (
          <li key={t.get('id')}
              className='todo__item'
              onClick={toggleClick(t.get('id'))}>
            <Todo todo={t.toJS()} />
          </li>
        ))}
      </ul>
    </div>
  );
}

//containers.js

import { connect } from 'react-redux';
import * as components from './components';
import { addTodo, toggleTodo } from './actions';
export const TodoList = connect(
  function mapStateToProps(state) {
		return { todos: state };
	},
  function mapDispatchToProps(dispatch) {
	  return {
	    addTodo: text => dispatch(addTodo(text)),
	    toggleTodo: id => dispatch(toggleTodo(id))
	  };
	}
)(components.TodoList);

//actions.js

const uid = () => Math.random().toString(34).slice(2);
export function addTodo(text) {
  return {
    type: 'ADD_TODO',
    payload: {
      id: uid(),
      isDone: false,
      text: text
    }
  };
}
export function toggleTodo(id) {
  return {
    type: 'TOGGLE_TODO',
    payload: id
  }
}

//reducer.js

import { List, Map } from 'immutable';
const init = List([]);
export default function(todos=init, action) {
  switch(action.type) {
    case 'ADD_TODO':
    	return todos.push(Map(action.payload));
    	
    case 'TOGGLE_TODO':
  		return todos.map(t => {
    		if(t.get('id') === action.payload) {
      		return t.update('isDone', isDone => !isDone);
    		} else {
      		return t;
    		}
  		});
    default:
      return todos;
  }
}

不确定是否与编程相关或我的浏览器配置对iframes过于严格

编辑1:我用以下命令启动了开发服务器:

webpack-dev-server——port 3000——host 0.0.0.0

这是我的webpack。config.js

module.exports = {
  entry: './src/app.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /'.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: { presets: [ 'es2015', 'react' ] }
      }
    ]
  }
};