从回调中向按钮添加值

Question

render: function(){
    var id = 2;

    return(
        <div>
            <input type="text" ref="id" value={id} />
        </div>
    )
}

我知道我可以使用变量将值添加到按钮（如上所述），但是我从 mysql 数据库获取初始值，这需要回调函数。我正在使用 socket.io 来尝试获取值：

render: function(){
    socket.emit('get_value')
    socket.on('returned_value',  function (value) {
        //does not work
        id = value
    }

    return(
        <div>
            <input type="text" ref="id" value={id} />
        </div>
    )
}

发射有效，但 socket.on 无效。我也试过将render包裹在socket.io方法中强制等待，但显然行不通。我不知道如何动态地从 app.js class 到 index.js 获取值。

在app.js中：

socket.on('get_value', function () {
   mysql.getCurrentValue('*', function (result) {
   socket.emit('returned_value', result)
   });
});

尝试将 mysql 脚本直接包含在 index.js 中（即 mysql = require('mysql.js')）也会导致页面无法呈现，但我不会知道为什么。我在 app.js 工作，这就是我使用 socket.io.

的原因

Answer 1

我整理了一份 quick example。将套接字代码放在componentDidMount()方法中，将id设置为状态（this.setState({ id: id });。然后将输入的值设置为this.state.id。

  componentDidMount() {
    socket.emit('get_value')
    socket.on('returned_value',  function (value) {
      this.setState({id: id});
    }.bind(this); // think you have to bind, didn't test
  }
  render() {
    return(
      <input type="text" ref="id" value={this.state.id} />
    );
  }

从回调中向按钮添加值

React adding value to button from callback

javascript

reactjs