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

Question

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

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

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

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

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

或者，也许这可以在没有突变体的情况下完成？我将衷心感谢您的帮助。这是一个live example（清除字段仅适用于单击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>

Answer 3

问题不在于您的代码中的 react-final-form，这是由于 react-da 数据，我在 1 天内对您的代码进行了很多操作，并且检查的重置与 react 一起工作正常-最终形式

只需使用此代码更新您的渲染，就可以看到重置工作正常。是的！问题出在反应数据上。由于此软件包的官方信息较少，我不确定它的作用。

 <div className="App">
      <h2>Dadata test</h2>
      <Form
        mutators={{
          clear: ([address], state, { changeValue }) => {
            changeValue(state, "address", () => undefined);
          }
        }}
        onSubmit={onSubmit}
        render={({ form, handleSubmit, pristine, invalid, values, errors }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Field name="address" component="input" />
              {/* {props => (
                <div>
                  <ReactDadata
                    token="d19c6d0b94e64b21d8168f9659f64f7b8c1acd1f"
                    onChange={event =>
                      props.input.onChange !== undefined
                        ? props.input.onChange({ value: event })
                        : form.mutators.clear
                    }
                  />
                </div>
              )}
            </Field> */}
            <button type="submit" disabled={invalid}>
              Submit
            </button>
            <button type="button" onClick={form.reset}>
              Clear
            </button>
            <Fields names={["address"]}>
              {fieldsState => (
                <pre>{JSON.stringify(fieldsState, undefined, 2)}</pre>
              )}
            </Fields>
          </form>
        )}
      />
    </div>

希望它能帮助您解决问题。