<Form/> cannot submitted via ‘action’ property
まだ誰も着手していません。
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
src/Form.tsx の 164–165 行付近にある submit イベント処理から始め、リンク先のデモリポジトリを実行して、失敗するネイティブ送信を再現してください。修正では、action と method を持つフォームがネイティブの仕組みを通じて送信できるようにしつつ、バリデーションの動作と onFinish の処理を維持する必要があります。
索引モデルが issue の本文から書いたものです。
説明
I'm currently experimenting with a login form implemented using rc-field-form at its core that interacts with an OAuth2/OIDC implementation that expects a traditional server side rendered app for the login form. For this reason, I want to not attach an onFinish() callback to the form, but instead submit it via the native <form> submit mechanism, by setting the action property on the form, like so:
<Form name="test-form" action="https://httpstat.us/200" method="post">
<Field name="test-field">
<input placeholder="test field" value={""}/>
</Field>
<button type="submit" value={"submit"}>
Submit
</button>
</Form>
Since FormProps transitively extends React.FormHTMLAttributes I was expecting this to work, but of course it doesn't because here the event propagation of the submit click is stopped in favour of delegating processing to the form instance. I think rc-field-form's behaviour would be less surprising if event propagation were only stopped if:
- Form validation fails
- An on finish callback is actually attached to the form.
Of course, the alternative would be to omit action (and probably method) from FormProps, though that hardly seems satisfactory to me.
A demonstrator reproducing the bug can be found here: https://github.com/ngrewe/rc-field-form-bug
Thanks,
Niels
- 主要言語
- TypeScript
- スター
- 1k
- フォーク
- 286
- 平均マージ
- 4日 16時間
- マージ済み PR（30日）
- 1
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react-component/field-form のほかの issue
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
react-component/field-form#768 · コメント 5 件 ·
-
難易度 4/5 3〜5日 初心者へのやさしさ 25/100
react-component/field-form#751 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 42/100
react-component/field-form#749 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/field-form#746 ·
-
難易度 3/5 1〜2日 初心者へのやさしさ 35/100
react-component/field-form#733 · コメント 1 件 ·
react-component/field-form の issue をすべて見る
似ている issue
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
Crush オープン
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md オープン
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
ElementsProject/cln-application#167 · コメント 1 件 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Quantco/pnpm-licenses#17 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100