Question

我目前正在使用＆＃34; Handsontable，＆＃34; React的包装器（react-handsontable）。

我遇到的主要问题是能够挂钩包装器创建的<select>字段以更改我的应用程序状态。

我需要连接到DOM（而不是虚拟DOM）上的输入，并onchange更改我的组件状态。

我怎样才能完成这项工作。

Answer 1

您是否考虑过使用onChange处理程序将select作为React组件呈现？无论哪种方式，您可以做的是添加自定义渲染器，将onchange处理程序添加到该select元素，并将其分配给React组件类的绑定方法。这样你就可以用它来修改状态，而不需要像从DOM节点操纵状态那样做任何讨厌的事情。

Answer 2

使用refs绑定父容器以访问子级及其事件委托

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

我现在用一些黑魔法改变我的反应应用程序的状态

从现有DOM节点处理React状态

2 个答案: