Formik Chakra-ui选择不使用值

Question

我正在尝试提交一个带有下拉列表的表单。问题是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>

虽然ingredientId在提交后仍然是空的，但你知道吗？

Answer 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