我目前使用React(react-handsontable)的「Handsontable」包裝器。從現有的DOM節點操縱React狀態
我一直有的主要問題是能夠掛接到由包裝器創建的<select>
字段以更改我的應用程序狀態。
我需要掛鉤到DOM上的輸入(不是虛擬DOM),並且onchange
更改我的組件狀態。
我該如何去做到這一點。
我目前使用React(react-handsontable)的「Handsontable」包裝器。從現有的DOM節點操縱React狀態
我一直有的主要問題是能夠掛接到由包裝器創建的<select>
字段以更改我的應用程序狀態。
我需要掛鉤到DOM上的輸入(不是虛擬DOM),並且onchange
更改我的組件狀態。
我該如何去做到這一點。
您是否考慮過使用onChange
處理程序將選擇渲染爲React組件本身?無論哪種方式,你可以做的是添加一個自定義渲染器,你可以在該選擇元素中添加onchange
處理程序,並將其分配給React組件類的綁定方法。這樣你就可以用它修改狀態,而不需要做任何討厭的操作,比如從DOM節點操縱狀態。
使用裁判父容器訪問的孩子和他們的活動代表團
<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,
});
}
});
}
我綁定現在改變我的反應應用程序的狀態與一些黑暗的魔法
這是可怕的代碼 – ZekeDroid
是的,這是什麼時候你aginst反應的糧食和使用直接接觸DOM的包裝。 –
我真的想將'select'呈現爲一個反應組件,但是包裝器將它變成一個字符串,我不得不看看它將如何創建一個自定義渲染器來渲染頭中的React組件這個包裝病了做一些研究謝謝ZekeDroid –
是的,你總是可以使用'ReactDOM.render'呈現它,並將它作爲容器賦予'td'。這就是我們在我們的項目中所做的事情,它非常棒! – ZekeDroid
但它不會基本上是第二個反應的應用程序,所以它會有自己的狀態? –