MUI & Formik：验证不会触发 useField

Question

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

基本上，我有一个 AutoComplete 下拉列表，它使用 useField 钩子绑定到 Formik 表单中。这会在任何更改时正确设置值，但验证似乎不会在我期望的时候触发。

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

1. 另一个字段已更改
2. 在下拉列表中选择一个值后点击“背景”

我的预期和想要的是验证应该在选择值时立即运行。

复制：

1. 点击类别下拉菜单
2. 选择一个值，关闭下拉菜单
3. 确认错误仍然显示（在字段和打印输出中）
4. 单击屏幕上的其他位置。这应该会触发验证并清除错误。

有什么建议吗？

编辑： 我已经测试了一个使用 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)}
          />
        )}
      />