从现有的 DOM 节点操作 React 状态答案

【问题标题】：Manipulating React State from an Existing DOM Node从现有的 DOM 节点操作 React 状态
【发布时间】：2017-11-07 17:25:27
【问题描述】：

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

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

我需要挂钩到 DOM（不是虚拟 DOM）上的输入，然后 onchange 更改我的组件状态。

我怎样才能做到这一点。

【问题讨论】：

标签： reactjs dom react-dom virtual-dom

【解决方案1】：

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

【讨论】：

我真的很喜欢将select 渲染为一个反应组件，但是包装器将它变成了一个字符串，我必须看看创建自定义渲染器以在这个包装的标题我做一些研究谢谢ZekeDroid
是的，您始终可以使用ReactDOM.render 渲染它，并将td 作为容器。这就是我们在项目中所做的，而且效果很好！
但它基本上不是第二个反应应用程序，所以它会有自己的状态吗？
理论上是的，但是您将附加一个绑定的更改处理程序（绑定到您的“主”React 组件），因此它不会有自己的状态，只是在您的实际组件。

【解决方案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,
     });
   }
 });
}

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

【讨论】：

是的，这就是当你违背 react 并使用直接接触 DOM 的包装器时会发生的情况。