Как получить значение select в функции handlesubmit с formik реагировать на js? - PullRequest
Новая
       12

Как получить значение select в функции handlesubmit с formik реагировать на js?

0 голосов
/ 15 мая 2018

Я разрабатываю форму в реактивах, используя плагин formik ссылка на плагин .когда я отправляю форму, я получаю значения текстовых полей, но выпадающие значения становятся пустыми ...

это мой выпадающий список 

<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>

обрабатывать функцию отправки 

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

      }

Я получаю все значения текстовых полей в функции отправки дескриптора, но я не могу получить выбранное значение раскрывающегося списка.

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

Я тоже столкнулся с этой проблемой вчера. Моя проблема заключалась в том, чтобы отправить форму, содержащую раскрывающийся список дизайна муравья. Я наконец заставляю это работать после часов:

В документе сказано, что вам нужно установить onChange , onBlur события равными setFieldValue , setFieldTouched , соответственно, как сторонние входные данные : 

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

Так что к моей проблеме, мне нужно немного изменить: 

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

Надеюсь, это поможет.

Вот мой CodeSandbox

0 голосов
/ 18 мая 2018

Более надежным способом обработки выбранных компонентов при использовании Formik было бы также использование компонента Jed Watsons Reaction-select .Они прекрасно работают вместе и абстрагируют многие шаблоны, которые вы обычно должны реализовать, чтобы компонент работал беспрепятственно с Formik.

Я привел простой пример из реакции-выбора / Джареда ПалмераFormik пример на коды и коробки и настроить его, чтобы отразить ваш код выше.

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"));

Есть несколько ошибок, вы должны включить css для выбора реакции, чтобы компонент отображался правильно 

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

поле опции функции mapPropsToValues ​​должно быть инициализировано вобъект 

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

Наконец, вот ссылка на пример кода и коробки

Edit 31w93yvv45

...