尤川豪   ·  3月前
Exp. 1,630  ·  212 貼文  ·  145 留言

在原生 html form 內整合 React app 的一種 design pattern

最近開發功能,要做一個比較複雜的表單

大部份可用簡單的 html form 做完,少部份需要用 react 寫

最後設計出的作法如下:


除了 render React app 的元素容器之外

<div id="review-columns-setting-app"><div class="mt-3">載入中...</div></div>

form 內留一個 hidden input,form submit 時可自然送出。

需要塞預設值的話也可以。

@if (isset($topic))
<input type="hidden" id="review-columns-setting-state" name="review-columns-setting-state" value="{{ $topic->review_columns }}">
@else
<input type="hidden" id="review-columns-setting-state" name="review-columns-setting-state">
@endif

render 時,有預設值就以 props 傳入:

if ($('#review-columns-setting-state').val()) {
  ReactDOM.render(<App columns={$('#review-columns-setting-state').val()} />, document.getElementById('review-columns-setting-app'));
} else {
  ReactDOM.render(<App />, document.getElementById('review-columns-setting-app'));
}

接著設定

componentDidMount() {
  if (this.props.columns) {
    this.setState({ columns: JSON.parse(this.props.columns) });
  }
}

而在 App component 本身,則在 render 函式內傳值

render() {

  $('#review-columns-setting-state').val(JSON.stringify(this.state.columns));

如此一來,複雜的 React 本身狀態可以用 state 與 props 管理,但最終會同步到 html form 內,可以直接送出。

  分享   共 173 次點閱
共有 0 則留言
您的留言
尤川豪
Exp. 1,630  ·  212 貼文  ·  145 留言

關於作者

Devs.tw 作者,喜歡分享&建造新東西的工程師。

歡迎在 Facebook 追蹤我!不定期分享有趣技術文章!

  查看個人檔案