在react-final-form中清除输入时清除字段的值

Question

我正在使用自定义组件react-final-form。输入更改时，它将值设置为字段address。但是当清除输入时，它不会更新字段的值。所以我试图用形式变异器来做到这一点。

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

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

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

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

或者也许这根本不需要变异器就可以完成？我将衷心感谢您的帮助。这是一个实例（清除该字段仅适用于单击按钮 as onClick={form.mutators.clear}）。

Answer 1

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

Answer 2

所有默认回调均由组件处理。如果您想通过单击按钮进行清除，您可以创建一个自定义组件并使用本机回调方法来完成您的任务。

onChange = (event) => {
  this.setState({
    address:event.target.value
  });
}

onClear = () => {
  this.setState({
    address:''
  });
}

<div>
  <Field name="address">
      <div>
        <input
          value={this.state.address}
          onChange={this.onChange}
        />
      </div>
  </Field>
  <button onClick={this.onClear}>Clear</button>
</div>