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
}

或者这完全可以不用增变器来完成？我将衷心感谢您的帮助。这是live example（清除字段仅在单击onClick={form.mutators.clear}时才起作用）。

Answer 1

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

import React from 'react'
import Loadable from 'react-loadable'


const B_async = Loadable({
  loading: () => <h1>loading B...</h1>,
  loader: () => import('./B.component')
})


export default B_async

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

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

Answer 2

您可以随时调用@PreDestroy public void onExit() { //STOP FROM THE LIFECYCLE }来清除值。

Answer 3

问题不是代码中的react-final-form引起的，这是由于react-da数据所致，我在1天之内对您的代码进行了很多测试，并检查了reset是否可以正常使用react -最终形式

只需使用此代码更新渲染器，然后查看reset即可正常工作。是的问题在于如何处理数据。由于该软件包的官方信息较少，我不确定该怎么做。

 <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>

希望它可以帮助您解决问题。

在反应最终形式中清除输入时清除字段的值

3 个答案: