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

Question

The app is accessible on this URL: http://91.142.210.160:3000/webpack-dev-server/

As you can see, the app works without errors but I can't really click on the text input and add a todo.

Bellow I'll show you my files, if you need more just write it down in the comments.

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

Not really sure if it's programming related or my browser config that is too strict about iframes

Edit 1: I started the dev server with the following command:

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

And this is my 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

You're using the wrong url. If you access your app with http://91.142.210.160:3000/ it works perfectly fine.