Reactjs 福米克车把胶用例

handleBlur

的用例是什么？因为您可以通过触摸对象访问触摸字段

从Formik文档：

handleBlur:（e:any）=>void

---

onBlur

事件处理程序。当您需要跟踪输入是否被触摸时，此功能非常有用。这应该传递给

handleBlur是实际更新触摸的方式（或至少一种方式）。如果您的输入未通过连接到Formik状态的onBlur处理程序，则触摸状态将不会更新

下面是一个代码沙盒，演示了该行为：

如果模糊第一个输入，则会更新触摸。如果模糊第二个输入，则不会更新触摸。第三个输入使用

useField

，这会导致

onBlur

字段自动传递给我的输入。这通常是我喜欢使用Formik（或几乎任何其他react表单库）的方式，因为它减少了将表单字段连接到表单状态所需的样板文件

import React from "react";
import { Formik, Form, useField } from "formik";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Formik
        initialValues={{ usingUseField: "", withBlur: "", withoutBlur: "" }}
      >
        {({ handleChange, handleBlur, values, touched }) => {
          return (
            <Form>
              {JSON.stringify(touched)}
              <div>
                <label>
                  With Blur
                  <input
                    onBlur={handleBlur("withBlur")}
                    onChange={handleChange("withBlur")}
                    value={values.withBlur}
                  />
                </label>
              </div>
              <div>
                <label>
                  Without Blur
                  <input
                    onChange={handleChange("withoutBlur")}
                    value={values.withoutBlur}
                  />
                </label>
              </div>
              <InputUsingUseField name="usingUseField" label="Using useField" />
            </Form>
          );
        }}
      </Formik>
    </div>
  );
}

function InputUsingUseField({ label, name }) {
  const [props] = useField(name);

  return (
    <div>
      <label>
        {label}
        <input {...props} />
      </label>
    </div>
  );
}

从“React”导入React；
从“Formik”导入{Formik，Form，useField}；
导入“/styles.css”；
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
{（{handleChange，handleBlur，values，toucted}）=>{
返回(
{JSON.stringify（触摸）}
模糊的
没有模糊
);
}}
);
}
函数InputUsingUseField（{label，name}）{
const[props]=useField（名称）；
返回(
{label}
);
}