Formik onChange 不适用于使用 react-select 的下拉列表

Question

Below is the code where I am trying to select value from dropdown. handleChange is not working, when I select the value from dropdown it's not getting updated with selected value from dropdown. It's getting vanished(blank).

Dropdown values are getting populated when I select it's not catching the new selected value.

Can someone help me on this like what I am missing here?

export const FormikSelectField = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  const [isFocused, setOnFocus] = useState(false);

  const handleChange = (value) => {
    // this is going to call setFieldValue and manually update values.topcis
    console.log('Value in handlechange..', value ,'and', props.name);
    props.onChange(props.name, value.value);
  };

  const handleFocus = () => {
    setOnFocus(true);
  };
  const handleBlur = (e) => {
    // this is going to call setFieldTouched and manually update touched.topcis
    setOnFocus(false);
    props.onBlur(props.name, true);
    field.onBlur(e);
  };
  return (
    <>
      <label htmlFor={props.labelName}>{props.labelName} </label>
      <Select
        id={props.labelName}
        options={props.options}
        isMulti={false}
        onChange={handleChange}
        onBlur={(e) => handleBlur(e)}
        placeholder='Select an option'
        onFocus={handleFocus}
        value={props.value}
      />
      {meta.touched && meta.error && !isFocused ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

 formikInitialValues = () => {
         return {
         Name: [{
                title: '',
                value: '',
              }]
         };         
    };

   YupValidationSchema = () => {
        return Yup.object({
    Name: Yup.array()
            .of(
              Yup.object().shape({
                title: Yup.string().required(),
                value: Yup.string().required(),
              })
            )
            .required("Please select an option")
            .nullable()

        });
      };

<FormikSelectField 
        value={this.state.selectNameOption}
        onChange={this.handleNameChange}
        onBlur={this.handleNameChangeBlur}
        error={formik.errors.Name}
        options={this.state.NameOptions}
        touched={formik.touched.Name}
        name="Name"
        labelName="Name"                             
  />

Answer 1

You should avoid mixing the state when using Formik. Formik will take care of the state for you.

import { Formik, Form, useField, ErrorMessage } from "formik";
import * as Yup from "yup";
import Select from "react-select";

const iceCreamOptions = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const FormSelect = ({ name, options }) => {
  const [field, meta, helpers] = useField(name);
  return (
    <>
      <Select
        name={name}
        value={field.value}
        onChange={(value) => helpers.setValue(value)}
        options={options}
        onBlur={() => helpers.setTouched(true)}
      />
      <ErrorMessage name={name} />
    </>
  );
};

const initialValues = {
  icecream: null
};

const validationSchema = Yup.object().shape({
  icecream: Yup.object()
    .shape({
      value: Yup.string(),
      label: Yup.string()
    })
    .required("Please select a value")
    .nullable()
});

export default function App() {
  return (
    <Formik
      initialValues={initialValues}
      onSubmit={(values) => console.log(values)}
      validationSchema={validationSchema}
    >
      {(props) => {
        return (
          <Form>
            <pre>{JSON.stringify(props, undefined, 2)}</pre>
            <FormSelect name="icecream" options={iceCreamOptions} />
          </Form>
        );
      }}
    </Formik>
  );
}

Example Working Sandbox

Answer 2

Write this code

onChange={(e:React.ChangeEvent<HTMLInputElement>)=> setFieldValue("title",e.target.value)}

or

onChange={(e)=> setFieldValue("title",e.target.value)}