2017-06-06 32 views
1

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

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

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

我該如何去做到這一點。

回答

0

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

+1

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

+0

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

+0

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

0

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

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

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

+0

這是可怕的代碼 – ZekeDroid

+0

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