Question

我的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用来映射值的字段的ID。

如果我以这种方式使用表格，我将无法在width / height字段中写入任何内容。

但是，当我从width更改值的键时（在props中找到width键，因此当mapStateToProps触发器触发时，我将具有width的初始值），例如，再说一下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字段，因此我需要它们，所以我不能这样做。

我想知道为什么给width赋一个初始值会使其变得不可估计

React + Formik + Yup输入字段不适用于initialValues

0 个答案: