javascript - 带有 redux 和 React 的 webpack-dev-server 阻止了我的输入

Question

可通过以下 URL 访问该应用:http://91.142.210.160:3000/webpack-dev-server/

如您所见，该应用程序运行没有错误，但我无法真正单击文本输入并添加待办事项。

下面我将向您展示我的文件，如果您需要更多文件，请在评论中写下来。

//应用程序.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')
);

//组件.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>
  );
}

//container.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;
  }
}

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

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

webpack-dev-server --port 3000 --hot --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' ] }
      }
    ]
  }
};

Answer 1

您使用了错误的网址。如果您使用 http://91.142.210.160:3000/ 访问您的应用程序它工作得很好。