用于更新输入的 Javascript 被占位符覆盖

Javascript to update input is overwritten by placeholder

本文关键字：占位符 覆盖 Javascript 更新 输入 用于      更新时间：2023-09-26

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

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

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

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，这可能会导致您的问题。

相关文章：