從現有的DOM節點操縱React狀態

我目前使用React（react-handsontable）的「Handsontable」包裝器。從現有的DOM節點操縱React狀態

我一直有的主要問題是能夠掛接到由包裝器創建的<select>字段以更改我的應用程序狀態。

我需要掛鉤到DOM上的輸入（不是虛擬DOM），並且onchange更改我的組件狀態。

我該如何去做到這一點。

2017-06-06 Braxton C

您是否考慮過使用onChange處理程序將選擇渲染爲React組件本身？無論哪種方式，你可以做的是添加一個自定義渲染器，你可以在該選擇元素中添加onchange處理程序，並將其分配給React組件類的綁定方法。這樣你就可以用它修改狀態，而不需要做任何討厭的操作，比如從DOM節點操縱狀態。

來源

2017-06-06 15:42:28 ZekeDroid

我真的想將'select'呈現爲一個反應組件，但是包裝器將它變成一個字符串，我不得不看看它將如何創建一個自定義渲染器來渲染頭中的React組件這個包裝病了做一些研究謝謝ZekeDroid –

是的，你總是可以使用'ReactDOM.render'呈現它，並將它作爲容器賦予'td'。這就是我們在我們的項目中所做的事情，它非常棒！ – ZekeDroid

但它不會基本上是第二個反應的應用程序，所以它會有自己的狀態？ –

使用裁判父容器訪問的孩子和他們的活動代表團

<div ref={ this.bindElementToInstance }> 
    <DataTable 
    tableData={ tableData } 
    header={ OPTIONS[selectedTab].header } 
    /> 
</div>

綁定元素

bindElementToInstance = (element) => { 
    this.tableContainer = element; 
}

使用更改事件傳播

componentDidMount() { 
this.tableContainer.addEventListener('change', (e) => { 
    if (e.target.name === GRAIN_INPUT_NAME) { 
    this.setState({ 
     selectedGrain: e.target.value, 
    }); 
    } 
}); 
}

我綁定現在改變我的反應應用程序的狀態與一些黑暗的魔法

來源

2017-06-06 18:55:15

這是可怕的代碼 – ZekeDroid

是的，這是什麼時候你aginst反應的糧食和使用直接接觸DOM的包裝。 –

從現有的DOM節點操縱React狀態

回答

相關問題