reactjs - 既存の DOM ノードから React 状態を操作する

Question

現在、React 用の「Handsontable」ラッパー (react-handsontable) を使用しています。

私が抱えている主な問題は<select>、ラッパーによって作成されたフィールドにフックして、アプリケーションの状態を変更できることです。

(仮想 DOM ではなく) DOM にある入力にフックしonchange、コンポーネントの状態を変更する必要があります。

どうすればこれを達成できますか。

Answer 1

参照を使用して親コンテナーをバインドし、子とそのイベント委任にアクセスする

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

私は今、反応アプリケーションの状態をいくつかのダークマジックで変更しています