Forkmik handleChange 不更新 React.js 中的下拉值答案

【问题标题】：Forkmik handleChange not updating dropdown value in React.jsForkmik handleChange 不更新 React.js 中的下拉值
【发布时间】：2021-08-23 19:04:36
【问题描述】：

我正在尝试使用 Form.Select from semantic ui react 来构建一个下拉菜单。我正在发送具有以下属性的对象数组来填充下拉选项：

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}
    />

【问题讨论】：

标签： javascript reactjs formik semantic-ui-react

【解决方案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

【讨论】：