Keskustelu: Ohjelmointikysymykset: JavaScript: React ja TextInput hidden?

Hei,

Miten jos haluan hidden lomakekentän React:sa niin miten saan siihen velue:n niin, että lomakkeen validointi menee läpi?

Eli tässä koodia:

<div className="form-group text-left">
   <TextInput
      label={"Domain"}
      value="www.domain.com"
      name="domain"
      hidden="true"
    />
</div>

Eli tuo value ei tule hidden tyyppiseen kenttään olenkaan ja on ihan sama mikä domain siinä on.

Ei onnistu edes näin vaan TextInput-kentään ei tule veluea edes jos kenttä ei ole piiloitettu.

<div className="form-group text-left">
   <input value="www.domain.com" name="domain" hidden="true" />
</div>

Eli yllä olevalla koodilla velue kyllä tulee kentään automaatisesti muttei mene domain validoinnista läpi, koska validointi ei tunnista name="domain"-atribuutia.

Tässsä React.js validointikoodia alla:

const SignupSchema = Yup.object().shape({
    name: Yup.string().required("Required").max(32, "Too Long!"),
    email: Yup.string()
      .email("Invalid email")
      .required("Required")
      .max(64, "Too Long!"),
    domain: Yup.string()
      .matches(/([a-z0-9]+\.)*[a-z0-9]+\.[a-z]+/, "Domain is invalid")
      .required("Required"),
    password: Yup.string()
      .required("Required")
      .min(8, "Too Short!")
      .max(32, "Too Long!"),
    confirmPassword: Yup.string()
      .required("Required")
      .oneOf(
        [Yup.ref("password"), null],
        "Password and Confirm password should be same."
      ),
});

Onko tuo (hidden="true" oikea propsi, vai pitäisi olla html-input -kenttien mukaisesti type="hidden" ?

Mitä formikirjastoa käytät? Ilmestyykö koko objekti onSubmitissa?

noutti kirjoitti:

Mitä formikirjastoa käytät? Ilmestyykö koko objekti onSubmitissa?

Ilmestyy onSubitissa joo. Ja kirjato on alempana.

https://formik.org/

Itseasiassa ks. kirjaston React Native: https://formik.org/docs/guides/react-native

siis domain ilmestyy myös onSubmitissa? Tällöin validaatiossa on virhe? Miksi muuten käytät hidden fieldiä ylipäätään?

noutti kirjoitti:

siis domain ilmestyy myös onSubmitissa? Tällöin validaatiossa on virhe? Miksi muuten käytät hidden fieldiä ylipäätään?

Ei vaan domain ei ilmesty ollekaan kentään alla ovelalla koodilla:

<TextInput
      label={"Domain"}
      value="www.domain.com"
      name="domain"
      hidden="true"
    />

Eli siksi ei toimi. Validoinnissa ei ole mitään vaikaa, koska kutenkin jos kenttä ei ole hidden ja sen täyttää manuaalisesti niin validointi menee läpi.

Snadisti hankala vastata, koska Formik kyllä ymmärtää oikein käytettynä myös hidden fieldit. Oletko siis hoitanut tuon TextInputin siten, että jollain statella toggletaan hiddeniä true tai falseksi?

Kentällä tarkoitat ilmeisesti objektia, joka tulee onSubmitissa mukana? Oletko rekisteröinyt kyseisen fieldin initialValueihin mukaan, vaikka on hidden? En muista ihan tarkasti miten formikissa tuo handlataan, mutta muistikuvieni perusteella ainakin typescriptillä työskennellessä initialvaluet tulee passata mukaan, jotta ei heitä herjaa.

Edit: https://stackoverflow.com/questions/53869048/reactjs-formik-hidden-field-sending-null-value-to-server

Sinulla pitäisi varmaan olla oikea piilotettu kenttä (<input type=hidden>) eikä muun kentän piilotus (hidden=true). Ensimmäinen tekee toimivan mutta näkymättömän kentän ja jälkimmäinen käytännössä poistaa kentän käytöstä Reactissa.

Jos kenttiä piilottaa muuten kuin tekemällä oikean piilokentän, yleensä silloin niiden arvojakaan ei lähetetä. Ainakin netissä sanotaan, että Reactissa hidden=true aiheuttaa juuri tämän ongelman. Monet ratkaisut tähän näyttävät olevan melkoista purkkaa (kuten noutti yllä linkittää) ja liittyvät ilmeisesti siihen, että kenttä joskus halutaan esiin ja joskus ei. Jos kenttä on aina piilossa, kannattaisi tehdä ihan oikea piilokenttä ilman muita kikkoja.

Metabolix kirjoitti:

Sinulla pitäisi varmaan olla type=hidden eikä hidden=true. Ensimmäinen tekee toimivan mutta näkymättömän kentän ja jälkimmäinen käytännössä poistaa kentän käytöstä Reactissa.

<TexInput/> on komponentti eikä natiivi elementti.

Edit: Nyt kun oikein katselen, niin todella vaikeaa debugata. Kun valuen tulisi olla value={values.domain} mikäli on formikin sisällä. Passaas koko formi ja logiikka, jota käytät. Ongelma ei ole pelkästään mikään hidden tason property

noutti kirjoitti:

<TexInput/> on komponentti eikä natiivi elementti.

Niin miksi siellä on TextInput, jos tavoitteena on oikeasti vain piilotettu input? Tästä varmaan kannattaisi ongelman ratkaisu aloittaa.

Metabolix kirjoitti:

noutti kirjoitti:

<TexInput/> on komponentti eikä natiivi elementti.

Niin miksi siellä on TextInput, jos tavoitteena on oikeasti vain piilotettu input? Tästä varmaan kannattaisi ongelman ratkaisu aloittaa.

Sikisi että rekisteroityymisessä on kaksi moodia, eli vain domain i4ware.fi sähköpostin omaava voi rekisteröityä ja sitten sellainen että kuka vaan voi rekisteritä omalla domainlila.

Metabolix kirjoitti:

noutti kirjoitti:

<TexInput/> on komponentti eikä natiivi elementti.

Niin miksi siellä on TextInput, jos tavoitteena on oikeasti vain piilotettu input? Tästä varmaan kannattaisi ongelman ratkaisu aloittaa.

Miksi siellä pitäisi olla piilotettu input, jos homman voisi hoitaa API:ssa? Mitä jos sillä TextInputilla on joku funktio?

walkout_ kirjoitti:

(23.03.2023 19:22:32): ”– –” Sikisi että rekis­te­roi­tyy­mi­sessä on kaksi...

Pystytkö passaamaan vaikka koko komponentin minimoidulla logiikalla tänne näin? Olisi helpompi katsoa. Sisällytä myös importit mikäli käytät kolmannen osapuolen kirjastoa. Mieleeni tuli myös sellainen, että mikäli visibility on hoidettu tyyliin näin komponentissa itsessään: visibility ? <input/> : null, niin tuolloin formikin eka rendaus saattaisi olla syypää. Toinen joka tulee mieleeni on se, että kyseiselle inputille ei ole annettu defaultValueta riippuen miten käytät formikkia. Hookkina vai wrapperina.

Ongelma ratkeaisi alta aikayksikön jos näkisi koodin.