Javascript 反应组分don'；t发射事件

我不能让这个简单的react组件发出事件。我有一个输入字段，在其中向DOM显示值。这就是我到目前为止得到的，我无法找出错误，控制台没有记录任何错误，这就是为什么我如此困惑的原因

////Server.js

const express = require('express');
const app = express();
const webpack = require('webpack');
const webpackMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config.js');
const compiler = webpack(config);
const server = require('http').Server(app);
const io = require('socket.io')(server);

app.use(webpackMiddleware(compiler, {publicPath:config.output.publicPath}))
app.use(express.static(__dirname + '/src'))

io.on('connection', socket => {
    socket.on('message', data => io.emit('message', data))
})

server.listen(3000, () => console.log('server is up!'))

///Main.js（编译为bundle.js的文件）

从“React”导入React；
从“react dom”导入react dom；
从“socket.io客户端”导入io
常量套接字=io（）
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={val:'}
}
componentDidMount（）{
socket.on（'message'，data=>this.setState（{val:data}））
}
手柄（e）{
this.setState（{val:e.target.value}）
socket.emit（'message'，e.target.value）
}
render（）{
返回

{this.state.val}
;
}
}
ReactDOM.render（，document.getElementById（'app'））

---

任何可能帮助我解决问题的帮助或git都会很有帮助的，泰

常量套接字=io（'）；我希望它能这么简单..也许可以把它放在构造函数中呢？文档说componentDidmount是一个不错的选择，但我也会尝试在构造函数中，也许它会改变一些东西..@AyrTodumas不，在我看来，连接到io并让套接字对象位于组件上方是更好的选择。OP我会检查a）你的handle函数是否真的被调用，b）在你的服务器

连接
回调中放置一个log语句，以确保客户端确实在进行connectionconst socket=io（'）；我希望它能这么简单..也许可以把它放在构造函数中呢？文档说componentDidmount是一个不错的选择，但我也会尝试在构造函数中，也许它会改变一些东西..@AyrTodumas不，在我看来，连接到io并让套接字对象位于组件上方是更好的选择。OP我会检查a）你的handle函数是否真的被调用，b）在你的服务器
连接
回调中放一个log语句，以确保客户端真的在进行连接
import React from 'react';
import ReactDOM from 'react-dom';
import io from 'socket.io-client'
const socket = io()

class App extends React.Component {
    constructor() {
        super();
        this.state = {val: ''}
    }

    componentDidMount() {
        socket.on('message', data => this.setState({val: data}))
    }

    handle(e) {
        this.setState({val: e.target.value})
        socket.emit('message', e.target.value)
    }

    render() {
        return <div>
            <input onChange= {this.handle.bind(this)}/> <br />{this.state.val}
        </div>;
    }
}

ReactDOM.render(<App />, document.getElementById('app'))