私は現在、React（react-handontable）の "Handsontable"ラッパーを使用しています。既存のDOMノードからの反応状態の操作
主な問題は、アプリケーションの状態を変更するためにラッパーによって作成された<select>フィールドにフックできることです。
DOM（仮想DOMではなく）にある入力にフックする必要があり、onchangeはコンポーネントの状態を変更します。
これを達成するにはどうすればよいですか。
onChangeハンドラを使用してselectをリアクションコンポーネントとしてレンダリングすることを検討しましたか？どちらの方法でも、カスタムレンダラーを追加して、onchangeハンドラーをそのselect要素に追加し、それをReactコンポーネントクラスのバインドされたメソッドに割り当てます。そうすれば、DOMノードから状態を操作するなどの厄介なことをすることなく、状態を変更することができます。
バインドは、私が「要素
bindElementToInstance = (element) => {
this.tableContainer = element;
}
が変更イベントの伝播
componentDidMount() {
this.tableContainer.addEventListener('change', (e) => {
if (e.target.name === GRAIN_INPUT_NAME) {
this.setState({
selectedGrain: e.target.value,
});
}
});
}
を使用
<div ref={ this.bindElementToInstance }>
<DataTable
tableData={ tableData }
header={ OPTIONS[selectedTab].header }
/>
</div>
子にアクセスするために親コンテナをバインドするために、参考文献を使用して、そのイベントの委任暗い魔法で私の反応の様子を変える今
これは怖いコード – ZekeDroid
ええ、これは、あなたが反応の粒をaginstに行き、DOMに直接触れるラッパーを使用するとどうなりますか。 –
Idは実際には '' 'select'''を反応コンポーネントとしてレンダリングしたいが、ラッパーはそれを文字列に変換します。ヘッダーにReactコンポーネントをレンダリングするためにカスタムレンダラーを作成するためには、このラッパーのいくつかの研究をしていただきありがとうございますZekeDroid –
ええ、あなたはいつも 'ReactDOM.render'を使ってそれをレンダリングし、' td'をコンテナとして与えることができます。それが私たちのプロジェクトでやっていることです。 – ZekeDroid
しかし、それは基本的にそれが独自の状態を持っているので、2番目の反応のアプリケーションですか？理論上は –