Ini adalah contoh bagaimana bagian rendering dari formhandler saya. Js sepertinya:

return (
  <div>
    <CustomForm1 data={ testProps1 }/>
    <CustomForm2 data={ testProps2 }/>
  </div>
)

Formulir yang Custom adalah dua bentuk komponen yang saya buat dan masing-masing memiliki permintaan "GET" dan "POST" mereka sendiri ke backend (Django dalam hal ini).

Apakah mungkin untuk:

Pertama, buat tombol di formhanlder.js untuk mengirimkan nilai komponen Customform menggunakan fungsi "post" masing-masing

Dan kedua, ekstrak nilai-nilai yang dimasukkan di setiap bentuk Custom dan menanganinya dalam CustomForms.js sebelum mengirimkan. Misalnya, dengan asumsi ini ada di Customform1.js:

<input name="customField" />

Mungkin saya bisa menggunakan sesuatu seperti:

let fieldValue = CustomForm1.customField.value;

Dari fungsi di dalam formhandler.js, sehingga saya dapat membuat beberapa perhitungan tambahan sebelum mengirimkan.

1
supah0t 5 April 2021, 12:02

1 menjawab

Jawaban Terbaik

Meskipun Anda tidak dapat beralih dari anak ke orang tua (bawah ke atas), Anda selalu dapat ke atas dari orang tua ke anak menggunakan propagasi negara. Mendeklarasikan variabel negara dan itu mengubah pawang di dalam formhandler.js dan lulus sebagai alat peraga untuk komponen formulir khusus. Katakanlah Anda perlu 1 bidang tambahan seperti pada Customform1. Kode harus terlihat seperti ini:

Di dalam formhandler.js (dengan asumsi Anda menggunakan komponen fungsional)

function FormHandler() {
    const [customFieldForForm1, setCustomFieldForForm1] = React.useState("");
    // inside your submit handler you can easily use this customFieldForForm1 value
    ...
    return (
        <div>
            <CustomForm1 data={testProps1} customField={customFieldForForm1} onCustomFieldChange={setCustomFieldForForm1} />
            <CustomForm2 data={testProps2} />
        </div>
    )
}

Di dalam customform1.js.

function CustomForm1(props) {
    return (
        <form ...>
            ...
            <input name="customField" value={props.customField} onChange={props.onCustomFieldChange} />
            ...
        </form>
}
0
Shubhaw Kumar 5 April 2021, 12:07