Question

我正在尝试在我的表单上使用Formik，该表单成功地完成了从自定义Input子组件到其父组件的某些状态提升（紧随React的官方网站tutorial之后）

以下沙箱显示了我到目前为止的基本示例： https://codesandbox.io/s/formik-with--or-without-custom-component-d8sof （是的，InputStyled有一些 styled-components ，但是应该是“透明的”）

          <Input //switch to input to try other scenario
            type="number"
            name="surface"
            placeholder="please type surface"
            onValueChange={handleSurfaceChange}
            unit="sq feet"
            value={values.surface}
            onChange={handleChange}
          />

上面的摘录显示了一个名为Input的自定义组件（请注意大写的“ I”）

使用此自定义组件Input：可以抬起状态，但Formik无法跟踪表面，并且验证始终会失败。

使用输入（小写-不调用我的自定义组件）：通过Formik进行验证有效，但我没有使用我的自定义组件，因此我没有参与提升子状态。 =>我的目标是使两者同时发挥作用。

因此，我尝试使用<Field component={Input} />代替我的<Input /> https://jaredpalmer.com/formik/docs/api/field

但是我无法理解如何使代码正常工作。

我开始研究另一个codesanbox示例，该示例遵循此处和此处的不同路径，但是事情变得混乱了。

https://codesandbox.io/s/formik-with--or-without-custom-component-ybbm7

在父母中：

<Field
            component={Input} //my custom React Component
            type="number"
            name="surface"
            placeholder="please type surface"
            onValueChange={handleSurfaceChange}
            value={values.surface}
            //at a loss below
            //onChange={handleChange}
            // handleChange={e => {
            //   console.log("Entering handleChange in Field...");
            //   // call the built-in handleChange
            //   handleChange(e);
            //   // and do something about e
            //   let someValue = e.currentTarget.value;
            //   console.log("someValue = " + someValue);
            // }}
          />

在子对象中（这是一个样式化的组件，没什么花哨的，只是用CSS“修饰”了常规输入）：

<InputStyled
        {...field}
        {...props}
        id={props.name}
        name={props.name}
        type={props.type}
        //value={props.value}
        onChange={handleChange}
        // onChange={newValue => {
        //   setFieldValue(field.name, newValue);
        //   console.log("newValue = " + newValue);
        // }}
        placeholder={props.placeholder}
      />
      {touched[field.name] && errors[field.name] && (
        <div className="error">{errors[field.name]}</div>
      )}

我找不到从Formik和我自己处处理onChange，handleChange事件的正确方法。状态提升和Formik验证被破坏。

有人可以指出正确语法的正确方向吗？

使用自定义组件对Formik进行反应：在验证时提升状态

0 个答案: