web-dev-qa-db-fra.com

Comment recevoir une valeur de sélection dans la fonction handlesubmit avec formik react js?

je développe un formulaire dans reactjs en utilisant formik plugin plugin link . quand je soumets un formulaire, j'obtiens des valeurs de champs de texte, mais les valeurs de liste déroulante sont vides ...

c'est ma liste déroulante sélectionnez

<div className="form-group">                  
                <Field component="select" id="category" name="category" value={this.state.value} className={"form-control"} onChange={ this.handleChange }>
                   <option value="lokaler">Lokaler</option>
                   <option value="jobb">Jobb</option>
                   <option value="saker-ting">Saker & ting</option>
                   <option value="evenemang">Evenemang</option>
                </Field>
                  </div>

gérer la fonction d'envoi

export default withFormik({
  enableReinitialize: true,
  mapPropsToValues({ category }) {
    return {      
      category: category || ''
    }
  },
    handleSubmit(values, { setStatus, setErrors }){
      console.log("data is this: "); 
      console.log(values); //here i am getting all form fields values except select value returning empty value
      console.log("category: "+values.category);// here i always get empty value but not getting selected value

      }

je reçois toutes les valeurs de champs de texte dans la fonction de soumission de descripteur, mais je ne parviens pas à obtenir la valeur sélectionnée de liste déroulante .... merci de me dire comment obtenir la valeur de sélection de liste déroulante dans la fonction de soumission de descripteur?

javascripthtmlformsreactjsformik
2
Ahmad

J'ai aussi fait face à ce problème hier. Mon problème était de soumettre un formulaire contenant un menu déroulant de conception de fourmi. Je le fais enfin fonctionner après des heures de:

Le document a indiqué que vous devez définir les événements onChange, onBlur sur setFieldValue, setFieldTouched, respectivement, comme pour un exemple d'entrée tiers:

<MySelect
    value={values.topics}
    onChange={setFieldValue}
    onBlur={setFieldTouched}
    error={errors.topics}
    touched={touched.topics}
/>

Donc à mon problème, je dois changer un peu:

<Select
  {...field}
  onChange={(value) => setFieldValue('fruitName', value)}
  onBlur={()=> setFieldTouched('fruitName', true)}
  value={values.fruitName}
  ...
>
...
</Select>

J'espère que cela aidera.

Voici mon CodeSandbox

3
Tun Tun Aung

Un moyen plus robuste de gérer certains composants lors de l'utilisation de Formik serait également d'utiliser le composant Jed Watsons react-select . Les deux fonctionnent bien ensemble et suppriment une grande partie du standard que vous auriez normalement besoin de mettre en œuvre pour que le composant fonctionne de manière transparente avec Formik.

J’ai fourni un exemple simple tiré de exemple de Jade Palmer: react-select/Formik sur codesandbox et l’a réglé pour refléter votre code ci-dessus. 

import "./formik-demo.css";
import React from "react";
import { render } from "react-dom";
import { withFormik } from "formik";
import Select from "react-select";
import "react-select/dist/react-select.css";

const options = [
  { value: "lokaler", label: "Lokaler" },
  { value: "jobb", label: "Jobb" },
  { value: "saker-ting", label: "Saker & ting" },
  { value: "evenemang", label: "Evenemang" }
];

const MyForm = props => {
  const {
    values,
    handleChange,
    handleBlur,
    handleSubmit,
    setFieldValue
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="myText" style={{ display: "block" }}>
        My Text Field
      </label>
      <input
        id="myText"
        placeholder="Enter some text"
        value={values.myText}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      <MySelect value={values.option} onChange={setFieldValue} />
      <button type="submit">Submit</button>
    </form>
  );
};

class MySelect extends React.Component {
  handleChange = value => {
    // this is going to call setFieldValue and manually update values.topcis
    this.props.onChange("option", value);
  };
  render() {
    return (
      <div style={{ margin: "1rem 0" }}>
        <label htmlFor="color">Select an Option </label>
        <Select
          id="color"
          options={options}
          onChange={this.handleChange}
          value={this.props.value}
        />
      </div>
    );
  }
}

const MyEnhancedForm = withFormik({
  mapPropsToValues: props => ({
    myText: "",
    option: {}
  }),
  handleSubmit: (values, { setSubmitting }) => {
    console.log(values);
  }
})(MyForm);

const App = () => <MyEnhancedForm />;
render(<App />, document.getElementById("root"));

Il y a quelques pièges, vous devez inclure le css réagi pour que le composant s'affiche correctement

import "react-select/dist/react-select.css";

le champ d'option function mapPropsToValues ​​doit être initialisé avec un objet

 mapPropsToValues: props => ({
    myText: "",
    option: {}

Enfin, voici un lien vers l'exemple de codesandbox 

Edit 31w93yvv45

0
Faktor 10