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更新輸入被覆蓋佔位符

回答

相關問題