reactjs - 从现有的 DOM 节点操作 React 状态

Question

我目前正在使用 React (react-handsontable) 的“Handsontable”包装器。

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

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

我怎样才能做到这一点。

Answer 1

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

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

Answer 2

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