Formik Chakra-ui 选择不使用值答案

【问题标题】：Formik Chakra-ui select not using valueFormik Chakra-ui 选择不使用值
【发布时间】：2021-02-25 18:50:44
【问题描述】：

我正在尝试提交带有下拉列表的表单。问题是 formik 无法识别选项中的值，不知道为什么或如何解决它。

const [value, setValue] = React.useState("");
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setValue(event.target.value);
};

<Formik
    initialValues={{ ingredientId:"", }}
    onSubmit={async (values, { setErrors }) => {
        console.log(values);
    }}
>
    {({ isSubmitting }) => (
        <FormControl name="ingredientId" id="ingredientId">
            <FormLabel>Ingredient</FormLabel>
            <Select 
               name="ingredientId" 
               id="ingredientId" 
               onChange={handleChange} 
               value={value}
             >
                {ingredients!.map((ingredient: any) => {
                    return <option value={ingredient.id} id="ingredientId"> 
                        {ingredient.name}
                    </option>;
                })}
            </Select>
        </FormControl>
        ...
    )}
</Formik>

虽然在提交后成分ID仍然为空，但有什么想法吗？

【问题讨论】：

标签： reactjs next.js formik chakra-ui

【解决方案1】：

这很有趣，但即使在 20 多年之后，当我赶时间时，这个仍然会让我绊倒。简单来说，选择的选项不存储为select元素的value。

要获得选定的值，您需要执行以下操作：

const { target } = event;

// note: 'select-multiple' for multi select
if (target.type === 'select-one') {
   const selectValue = target.selectedOptions[0].value;
}

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions

【讨论】：

【解决方案2】：

您不需要使用 value 和 handleChange。 Formik 会处理这个问题。你可以删除这行

const [value, setValue] = React.useState("");
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  setValue(event.target.value);
};

尝试使用来自formik 的<Field> 和{field.onChange} 或{form.handleChange}。示例：

    <Formik
      initialValues={{ ingredientId: '' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}>
      {(props) => (
        <Form>
          <Field>
            {({ field, form }: FieldProps) => (
              <FormControl name="ingredientId" id="ingredientId">
                <FormLabel>Ingredient</FormLabel>
                <Select
                  name="ingredientId"
                  id="ingredientId"
                  onChange={field.onChange} // or {form.handleChange}
                  value={value}>
                  {ingredients!.map((ingredient: any) => (
                    <option
                      key={ingredient.id}
                      value={ingredient.id}
                      id="ingredientId">
                      {ingredient.name}
                    </option>
                  ))}
                </Select>
              </FormControl>
            )}
          </Field>
          <Button isLoading={props.isSubmitting} type="submit">
            Submit
          </Button>
        </Form>
      )}
    </Formik>

见https://formik.org/docs/api/formik

【讨论】：