指定单选按钮的初始值

问题描述

我想在打开表单时检查“精确”单选按钮：

<Form
      onSubmit={onSubmit}
      initialValues={{ match_type: "exact" }}
      render={({ handleSubmit,form,reset,submitting,pristine,values }) => (
        <form
          onSubmit={() => {
            handleSubmit();
          }}
        >
          <fieldset>
            <legend>Match type</legend>
            <Field name="match_type">
              {({ input }) => (
                <label>
                  <input {...input} type="radio" value="fuzzy" /> Fuzzy
                </label>
              )}
            </Field>
            <Field name="match_type">
              {({ input }) => (
                <label>
                  <input {...input} type="radio" value="exact" /> Exact
                </label>
              )}
            </Field>
          </fieldset>
          <button type="submit">Save match</button>
        </form>
      )}
    />

单选按钮保持未选中状态。知道我该如何工作吗？请注意，<Field component="input" type="radio" .../>不是我的选择。

CodesandBox：https://codesandbox.io/s/react-final-form-reset-after-submit-forked-q6jyv?file=/index.js:359-1235

解决方法

您可以设置要在标记中检查的默认值。

<input {...input} type="radio" value="exact" checked />

,

我只需要正确使用Field组件：

<Field name="match_type" type="radio" value="fuzzy">
  {({ input }) => (
    <label>
      <input {...input} /> Fuzzy
    </label>
  )}
</Field>

通过这种方式，<input将从参数传递到渲染道具所需的内容。

,

如果您在提供的codeandbox中检查组件，则可以看到Field组件没有value属性。我要在此处附上屏幕截图

您可以选择几种方法来解决此问题。不过，主要思想是了解您说{...input}时在场组件中传递的内容，目前您只有name道具，因此可以添加类似的内容

input={{ name: 'match_type',value: 'exact',onChange: (e) => (whatever you need on change) }}

RFF可能只设置像这样的值就很棘手，因为真相来源以形式存在。因此，您还可以使用表单的mutator功能。 This is很好地说明了方法