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

Question

此应用程序可在此 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;
  }
}

不太确定是否与编程有关，或者我的浏览器配置对 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

你用错了url。如果您使用 http://91.142.210.160:3000/ 访问您的应用程序，它会工作得很好。

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

webpack-dev-server with redux and react is blocking my inputs

javascript

reactjs

webpack-dev-server

redux