在react-final-form中清除输入清除字段的值 [英] Clear a field's value on input clear in react-final-form

问题描述

我正在使用带有 react-final-form 的自定义组件.在输入更改时，它将值设置为 address 字段.但是当输入被清除时，它不会更新该字段的值.所以我正在尝试使用表单修改器来做到这一点.

I'm using a custom component with react-final-form. On input change it sets the value to the address field. But when the input is cleared it doesn't update the value of the field. So I'm trying to do it with form mutators.

我已经添加了一个用于清除字段的修改器:

I have already added a mutator for clearing the field:

mutators={{
  clear: ([address], state, { changeValue }) => {
    changeValue(state, "address", () => undefined);
  }
}}

我尝试将它添加到我的自定义 onChange 函数中，但它不起作用.

I tried to add it to my custom onChange function, but it doesn't work.

onChange={event =>
  props.input.onChange !== undefined
    ? props.input.onChange({ value: event })
    : form.mutators.clear
}

或者这可以在没有突变器的情况下完成吗?我将衷心感谢您的帮助.这是一个现场示例(清除字段仅适用于按钮点击 onClick={form.mutators.clear}).

Or maybe this can be done without mutators at all? I would really appreciate your help. Here is a live example (clearing the field works only on the button click as onClick={form.mutators.clear}).

推荐答案

您可以随时调用 form.change('address', undefined) 清除值.

You can just call form.change('address', undefined) at any time that you'd like to clear the value.

这篇关于在react-final-form中清除输入清除字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！