Formik onChange() 字段钩子覆盖显示值和选择机制

Question

我在 Formik 中有一个字段需要动态验证模式：当用户选择支付令牌时，必须为另一个输入字段动态更改最低支付值。 我使用了状态值和字段中的“onChange”侦听器，它有效，除了显示值

{token.symbol}

不再渲染。

好像重写“onChange()”字段方法已停用该字段的 Formik 选择。

知道发生了什么吗？

我的代码：

import { ErrorMessage, Field, Form, Formik } from 'formik';
import { SetStateAction, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import * as Yup from 'yup';
import SubmitButton from './SubmitButton';
import useAllowedTokens from '../../hooks/useAllowedTokens';

interface IFormValues {
  rateToken: string;
  rateAmount: number;
}

const initialValues: IFormValues = {
  rateToken: '',
  rateAmount: 0,
};

function ServiceForm() {
  const navigate = useNavigate();
  const allowedTokenList = useAllowedTokens();
  const [selectedToken, setSelectedToken] = useState('');

  const validationSchema = Yup.object({
    rateToken: Yup.string().required('Please select a payment token'),
    rateAmount: Yup.number()
      .required('Please provide an amount for your service')
      .when('rateToken', {
        is: (rateToken: string) => rateToken !== '',
        then: schema =>
          schema.moreThan(
            allowedTokenList.find(token => token.address === selectedToken)
              ?.minimumTransactionAmount || 0,
            `Amount must be greater than ${
              allowedTokenList.find(token => token.address === selectedToken)
                ?.minimumTransactionAmount || 0
            }`,
          ),
      }),
  });

  // const onSubmit = async (values: IFormValues) => {
  //   <...>
  // }

  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
      {({ isSubmitting }) => (
        <Form>
          <div className='grid grid-cols-1 gap-6 border border-gray-200 rounded-md p-8'>
            <div className='flex'>
              <label className='block flex-1 mr-4'>
                <span className='text-gray-700'>Amount</span>
                <Field
                  type='number'
                  id='rateAmount'
                  name='rateAmount'
                  className='mt-1 mb-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                  placeholder=''
                />
                <span className='text-red-500 mt-2'>
                  <ErrorMessage name='rateAmount' />
                </span>
              </label>

              <label className='block'>
                <span className='text-gray-700'>Token</span>
                <Field
                  component='select'
                  id='rateToken'
                  name='rateToken'
                  className='mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50'
                  placeholder=''
                  onChange={(event: { target: { value: SetStateAction<string> } }) => {
                    setSelectedToken(event.target.value);
                  }}>
                  <option value=''>Select a token</option>
                  {allowedTokenList.map((token, index) => (
                    <option key={index} value={token.address}>
                      {token.symbol}
                    </option>
                  ))}
                </Field>
                <span className='text-red-500'>
                  <ErrorMessage name='rateToken' />
                </span>
              </label>
            </div>

            <SubmitButton isSubmitting={isSubmitting} label='Post' />
          </div>
        </Form>
      )}
    </Formik>
  );
}

export default ServiceForm;

尝试过：覆盖 onChange() 字段方法

预期：所选的值（令牌）应该在表单的输入数据中更新，但不是。