Question

我有一个带占位符值的简单输入框。有一个简单的函数可以更新其值

socket.on('barcode', function (data) {
    console.log('data received')
    console.log(data);
    var barcodeObj = document.getElementById("barcode")
    barcodeObj.value = data;
})

我在这上面设置了一个BP，代码实际上正确地插入了条形码，但是在检查函数设置正确之后我继续运行应用程序然后再次被占位符快速覆盖。

这是运行ReactJS并且有一个onChange事件，但是，我希望能正确启动它。

输入定义如下

    <input
      type="text"
      id="barcode"
      placeholder="barcode.."
      value={this.state.barcode}
      onChange={this.handleBarcodeChange}
    />

并且处理程序设置如此

handleBarcodeChange: function(e) {
    this.setState({barcode: e.target.value});
  }

哪个，不做任何疯狂的事。

我在这里缺少什么？

更新

我能够通过将以下代码注入我的DeviceForm反应类来实现它。

componentDidMount: function () {
var that = this;
this.socket = io();     
this.socket.on('barcode', function (data) {
      console.log('data received')
      console.log(data);
      that.setState({barcode: data});
  });

这是来自此代码http://code.runnable.com/VOIYIALkqgAnHDmj/node-js-socket-io-and-react-js

Answer 1

我想你可能只想做这样的事情：

socket.on('barcode', function (data) {
    console.log('data received')
    console.log(data);
    this.setState({barcode: data});
}).bind(this)

setState应自动为您更新DOM，这意味着输入中的this.state.barcode将自动更新。致电barcodeObj.value = data;会同时触发onChange，这可能会导致您的问题。

占位符覆盖了更新输入的Javascript

1 个答案: