useState を使用してフォームに入力された値を設定します
P粉588660399
2023-09-04 23:16:30
<p>useState を使用して入力の値を設定しようとしていますが、期待どおりに機能しません。 </p>
<p>そこで、Formik の予約システムを使用して週間スケジュールを作成しました。無料の予定のラジオボタンがあります。選択すると、予定の時間データが取得されます。しかし、この日は手に入らなかった。そこで、毎日のデータを取得するために別の入力を追加してみました。入力した値を状態に設定します。ラジオ ボタンを選択すると、日付が設定されます。ただし、Submit では、新しく設定された値ではなく初期値を取得します。興味深いことに、入力に何かを書き込もうとすると、最後に押したキーに必要な値が返されます。ただし、何もしなければ初期値が返されるだけです。 </p>
<p>フォームの初期値:</p>
<pre class="brush:php;toolbar:false;">const [day, setDay] = useState("Gün");
<フォルミック
onSubmit={ハンドルフォーム送信}
初期値={{
名: ""、
姓: ""、
電子メール: ""、
日付: ""、
日: 日、
}}
></pre>
<p>ラジオ ボタンのステータスを設定します: </p>
<pre class="brush:php;toolbar:false;"><フィールド
type="ラジオ"
名前=「日付」
値={x.monPm3Time}
onClick={() => {
setDay("パザルテシ");
}}
/>前>
<p>入力の値は state:</p> に設定されます。
<pre class="brush:php;toolbar:false;"><フィールド
id="日"
名前=「日」
値 = {日}
/>前>
<p>私の handleSubmit 関数 (機能するかどうかを確認するために今ログに記録しています): </p>
<pre class="brush:php;toolbar:false;">const handleFormSubmit = async (values) => {
console.log(値);
// fetch("http://localhost:5000/api/appointment", {
// メソッド: "POST",
// 本体: 値、
// ヘッダー: {
// 認可: "Bearer" トークン、
// }、
// })
// .then((res) => {
// console.log(res.status);
// })
// .catch((err) => {
// console.log(err);
// });
}</pre></p>
そこで、コードエディターであなたの問題を(私の能力の限り)再現してみたところ、ラジオボタンがクリックされたときに入力のテキストを変更することができました。私の実装はここで見つけることができます: https://stackblitz.com/edit /react-b5rvzg?file=src/App.js
また、handleFormSubmit 関数には何も渡していないので、何も表示されないと思います。コードがどのように設定されているかを完全に理解していないため、間違っている可能性があります