尝试在React w/ Formik中为每次输入字段完成创建一个计数器

npm install react formik

import React, { useState } from 'react';
import { useField } from 'formik';

const CounterInputField = ({ label, ...props }) => {
  const [count, setCount] = useState(0);
  const [field, meta] = useField(props);

  const handleInputChange = (event) => {
    setCount(event.target.value.length);
    field.onChange(event);
  };

  return (
    <div>
      <label htmlFor={props.id || props.name}>{label}</label>
      <input {...field} {...props} onChange={handleInputChange} />
      <div>Character Count: {count}</div>
      {meta.touched && meta.error ? (
        <div>{meta.error}</div>
      ) : null}
    </div>
  );
};

export default CounterInputField;

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import CounterInputField from './CounterInputField';

const MyForm = () => {
  const handleSubmit = (values) => {
    // 处理表单提交逻辑
    console.log(values);
  };

  return (
    <Formik initialValues={{ inputField: '' }} onSubmit={handleSubmit}>
      <Form>
        <Field
          name="inputField"
          label="Input Field"
          component={CounterInputField}
        />
        <ErrorMessage name="inputField" component="div" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

export default MyForm;