reactjs - 指定单选按钮的初始值

Question

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

<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

Answer 1

如果您在提供的代码框中检查您的组件，您会看到 Field 组件没有value道具。我在这里附上截图

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

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

RFF 仅设置这样的值可能会很棘手，因为事实来源存在于表单中。因此，您还可以使用表单的 mutator 功能。这是一个很好的描述如何做到这一点

Answer 2

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

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

Answer 3

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

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

这样，<input将获得从参数传播到渲染道具所需的内容。