如何配置react-final-form的Field组件仅在失去焦点时执行校验？

嘿，这个场景我太熟悉了！你用的应该是react-final-form里的Field组件吧？默认情况下它确实会在内容变化时实时触发校验，但要改成仅在失去焦点时校验其实非常简单，只需要给Field组件添加一个validateTrigger属性就行。

直接上修改后的代码：

<Field 
  name="name" 
  component={TextInput} 
  placeholder="Name" 
  validate={inputContainsOnlyWords}
  validateTrigger="blur" // 关键就是这一行！
/>

原理说明： #

Field组件的validateTrigger属性默认值是'change'，所以每一次输入内容更新都会触发你传入的inputContainsOnlyWords校验规则。把它改成'blur'后，就只会在字段失去焦点（比如用户点击了输入框外的区域）时才执行校验逻辑。

如果之后你还需要在表单提交时也触发校验，还可以把validateTrigger设为数组形式，同时支持多个触发时机：

<Field 
  name="name" 
  component={TextInput} 
  placeholder="Name" 
  validate={inputContainsOnlyWords}
  validateTrigger={['blur', 'submit']}
/>

这样既满足了失去焦点校验的需求，也不会漏掉提交时的校验环节～

内容的提问来源于stack exchange，提问作者Juan Ignacio