Forkmik handleChange 未更新 React.js 中的下拉值

Question

我正在尝试使用 Form.Select 从语义 ui react 到 build 下拉菜单。我正在发送具有以下属性的对象数组来填充下拉选项：

DelivererForDropdown = {
                          key: deliverer.id,
                          value: deliverer.id,
                          text: deliverer.userName,
                          id: deliverer.id
                        };

我面临的问题是来自 Formik 的 handleChange 事件没有更新我的选择。我将此事件用于其他输入并且效果很好。

    <Form.Select 
      type="text"
      placeholder="Repartidor" 
      name="deliverer"
      options={deliverersForDropdown}
      search
      onChange={handleChange}
      error={errors.deliverer}
      value={values.deliverer}
    />

Answer 1

您可以使用 Formik 函数 setFieldValue() 手动设置处理程序中的值 onChange():

 <Formik
      enableReinitialize={true}
      initialValues={initialValues}
      onSubmit={async (values, { resetForm }) => {
        console.log(JSON.stringify(values, null, 2));
      }}
    >
      {({ isSubmitting, values, setFieldValue, setTouched, errors }) => {
        return (
          <FormikForm>
            <Form.Select
              type="text"
              placeholder="Repartidor"
              name="deliverer"
              options={deliverersForDropdown}
              search={true}
              onChange={(event, { value }) => {
                setFieldValue("deliverer", value);
                setTouched("deliverer", true);
              }}
              error={errors.deliverer}
              value={values.deliverer}
            />
            <button type="submit" disabled={isSubmitting}>
              SUBMIT
            </button>
          </FormikForm>
        );
      }}
 </Formik>

Live Demo

或者您可以使用自动绑定的第 3 方，例如 formik-semantic-ui

Forkmik handleChange 未更新 React.js 中的下拉值

Forkmik handleChange not updating dropdown value in React.js

javascript

reactjs

semantic-ui-react

formik