Поле ввода React + Formik + Yup не используется с initialValues - PullRequest
Новая
       10

Поле ввода React + Formik + Yup не используется с initialValues

0 голосов
/ 11 сентября 2018

У меня странное поведение с формой Formik.

Это форма: 

import React from 'react'
import { colorDepthDropdownData } from '../products_lookups'
import PanelInputField from './form_components/panel_input_field'
import PanelSelectField from './form_components/panel_select_field'
import PanelCheckBox from './form_components/panel_check_box'
import * as yup from 'yup'
import { withFormik, FormikErrors, FormikProps } from "formik";
import { debounce } from 'lodash'

const optionsForSelect = (collection) => {
  return collection.map(item => ({
    value: item.id,
    label: item.name
  }))
}

const validationSchema = yup.object().shape({
  width: yup
    .number()
    .min(gon.product_width_gt, 'Width should be a positive non-zero integer')
    .required(),
  height: yup
    .number()
    .min(gon.product_height_gt, 'Height should be a positive non-zero integer')
    .required(),
  color_depth: yup
    .string()
    .required()
})


class TexturesForm extends React.PureComponent {
  render() {
    const {
      values,
      handleChange,
      handleInputChange,
      handleSelectChange,
      handleBlur,
      errors,
      touched
    } = this.props;

    const debouncedHandleChange = debounce(handleChange, 200)

    console.log(values)
    return(
      <div className="panel panel-default specifications-panel" id="js-turbosquid-product-specifications-panel">
        <div className="panel-heading">
          <a href="#" className="js-more-info" data-toggle="collapse" data-target="#specifications-panel-instructions" tabIndex="-1">
            Specifications
            <i className="fa fa-question-circle" />
          </a>
        </div>

        <div className="panel-body panel-collapse collapse in" id="specification-panel-body">
          <div className="panel-body-container">
            <div id="specifications-panel-instructions" className="panel-instructions collapse" />

            <div className="row">
              <div className="col-xs-6">

                <PanelInputField 
                  label='Width' 
                  value={ values.width } 
                  onChange={ (e) => {console.log(e); return handleInputChange(e, debouncedHandleChange) } }
                  onBlur={ handleBlur }
                  formName='product_form_width'
                  fieldName='width'
                  errorMessage={ errors.width }
                  displayError = { touched.product_form_width ? touched.product_form_width.width : false }
                />

                <PanelInputField 
                  label='Height' 
                  value={ values.height } 
                  onChange={ (e) => handleInputChange(e, debouncedHandleChange) }
                  onBlur={ handleBlur }
                  formName='product_form_heigth'
                  fieldName='height'
                  errorMessage={ errors.height }
                  displayError = { touched.product_form_heigth ? touched.product_form_heigth.height : false}
                />

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const ProductSpecificationsTexturesPanel = withFormik({
  validationSchema,
  mapPropsToValues: (props) => (props.width),
  handleInputChange: (props) => (props.handleInputChange),
  handleSelectChange: (props) => (props.handleSelectChange),
})(TexturesForm)

export default ProductSpecificationsTexturesPanel

В этом случае fieldName представляет идентификатор поля, которое formik использует для сопоставления значений.

Если я использую форму таким образом, я ничего не могу написать в поле ширины / высоты.

Однако, когда я изменяю ключ значений из ширины (ключ ширины находится в подпорках, поэтому, когда mapStateToProps запускает, у меня будет начальное значение для ширины), скажем, что-нибудь еще, например, width_2, тогда я могу писать вещи. 

<PanelInputField 
                      label='Width' 
                      value={ values.width2 } 
                      onChange={ (e) => {console.log(e); return handleInputChange(e, debouncedHandleChange) } }
                      onBlur={ handleBlur }
                      formName='product_form_width'
                      fieldName='width2'
                      errorMessage={ errors.width }
                      displayError = { touched.product_form_width ? touched.product_form_width.width : false }
                    />

Однако это означает, что у меня нет начальных значений. Эту проблему можно преодолеть с помощью enableReinitialize или чего-то, приведенного в качестве аргумента для formik, но если я это сделаю, я потеряю поля TOUChed, и они мне понадобятся, поэтому я не могу этого сделать.

Я хотел бы знать, почему присвоение начального значения ширине сделало бы его не вменяемым,

...