MUI 和 Formik：验证不会触发 useField

Question

具有最小工作示例的代码框：https://codesandbox.io/s/mystifying-lake-m0oxc?file=/src/DemoForm.tsx

基本上，我有一个自动完成下拉菜单，它通过 useField 挂钩绑定到 Formik 表单中。这会在任何更改时正确设置值，但验证似乎不会在我期望的时候触发。

验证运行成功并在以下情况下删除错误：

另一个字段已更改
我在 select 在下拉列表中输入一个值后单击“背景”

我期望和想要的是，当值被 selected 时，验证应该运行立即。

重现：

单击类别下拉菜单
Select 一个关闭下拉菜单的值
确认错误仍然存在（在字段和打印输出中）
单击屏幕上的其他位置。这应该触发验证并清除错误。

有什么建议吗？

编辑：我已经用 react-select 作为下拉列表测试了一个等效的实现，但也有同样的问题，所以我认为它与 MUI 没有直接关系。

Answer 1

我只是根据您提供的工作示例进行了复制，发现您手动设置了 helpers.setTouched。

只是不要过度使用 setTouched，如果您从自动完成中删除所选项目，您还需要处理。

      <Autocomplete
        disablePortal
        id="category-selector"
        options={options}
        onBlur={() => helpers.setTouched(true, true)}
        isOptionEqualToValue={(option, value) => option.id === value.id}
        onOpen={() => helpers.setTouched(true, true)}
        onChange={(_, option) => {
          if (option) {
            helpers.setValue(option.id);
          } else {
            helpers.setValue(0);
          }
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Category"
            error={meta.touched && Boolean(meta.error)}
          />
        )}
      />

MUI 和 Formik：验证不会触发 useField

MUI & Formik: Validation doesn't trigger for useField

reactjs

material-ui

formik

formik-material-ui