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

IT技术 reactjs react-final-form
2021-04-15 07:47:45

我正在使用带有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
}

或者也许这可以在没有突变器的情况下完成？我将衷心感谢您的帮助。这是一个实时示例（清除该字段仅适用于按钮 click as onClick={form.mutators.clear}）。

3个回答

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

当清除其对象部分的字段时有选项吗？我试过但清空所有对象
2021-05-31 07:47:45
感谢你的回复。我试图将它添加到这里的清除按钮codesandbox.io/s/...，但该组件现在不起作用（该字段没有获得任何 onChange 值）。另外我的问题是，form.mutators.clear当输入被清除时，即当用户删除他输入的内容时，我如何调用此函数（或）。
2021-06-15 07:47:45

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

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>

感谢你的回复。但是我已经有一个按钮，可以用{form.mutators.clear}. 我的问题是，当用户从输入中删除值时，如何清除地址字段。
2021-05-27 07:47:45
您可以看到示例听到代码和框.io/s/...
2021-05-27 07:47:45

问题不在于您的代码中的 react-final-form，而是由于 react-da 数据，我在 1 天内围绕您的代码玩了很多，并且检查重置与 react-final 一起工作正常-形式

只需使用此代码更新您的渲染，即可看到重置工作正常。是的！问题在于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>

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

您好，谢谢您的回复。但我不需要使用form.reset. 地址字段将只是表单中的字段之一。因此，当输入本身被清除时，我需要找到一种方法来清除该字段的值。您可以键入Москва，选择其中一项建议，然后清除输入，以查看其工作原理。
2021-05-26 07:47:45
基本上，我需要集成form.mutators.clear到我的 onChange 函数中，或者在清除输入时找到另一种清除地址值的方法。
2021-06-06 07:47:45
您是否尝试过 form.resetFieldState 它将重置特定字段的值。我认为这是服务于您的目的的完美替代品
2021-06-08 07:47:45
你能在这里展示一个例子codeandbox.io/s/...吗？
2021-06-12 07:47:45
其它你可能感兴趣的问题
上一篇更新渲染元素（不可变） 下一篇Weather API 请求 cors 错误