Javascript更新输入被覆盖占位符

我有一个简单的输入框，占位符值。有一个简单的函数，更新它的价值Javascript更新输入被覆盖占位符

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

其中，心不是做任何疯狂。

我在这里失踪了什么？

UPDATE：

我能得到它在我的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

来源

2016-04-21 jrich523

你确定'handleBarcodeChange'被调用，当你做'barcodeObj.value = data;'？你应该在''barcode''订阅中明确地调用它 – iofjuupasli

反应组件是否被重新渲染？例如，这会擦除仅设置一次的值。 –

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

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

来源

2016-04-21 17:09:20

所以，为了做到这一点，它看起来像这个代码需要在一个反应类内。这是我放在getInitialState或渲染中的东西吗？ – jrich523

查看此代码后，我能够在componentDidMount中使用它：http://code.runnable.com/VOIYIALkqgAnHDmj/node-js-socket-io-and-react-js – jrich523

Javascript更新输入被覆盖占位符

回答

相关问题