如何使用带有 react-final-form 的自定义无线电组件？

Question

我正在尝试将自定义 Radio 组件与 React-final-form 一起使用，但它不是作为单选按钮而是作为复选框，即所有按钮都打开以供选择。

第 3 方单选按钮具有以下架构：

checked boolean     
Whether or not radio is checked

onChange    () => void      
Called when the user attempts to change the checked state

name    string      
The input name, used to reference the element in JavaScript

我创建了一个自定义组件来使用Radio 组件：

const CustomRadio = (props: any) => (
    <Radio
        {...props.input}
        {...props.rest}
        name={props.name}
        onChange={() => props.input.onChange()}
    />
)

我的使用方法如下：

<Field name="food"
component={CustomRadio}
value="1"
/>
<Field name="food"
component={CustomRadio}
value="2"
/>

作为 RFF 和 React 的新手，我可能做错了什么，因此我们将不胜感激。

基本上，我想将 RFF 与我的 3rd 方组件一起使用。虽然我已经成功地按预期将我的 Input 组件与 RFF 一起使用，但 Radio Button 是造成问题的一个。

Answer 1

下面是带有 react-final-form 的 Radio 的正确实现：-

https://codesandbox.io/s/vibrant-easley-5n1ek?file=/index.js

/* eslint-disable jsx-a11y/accessible-emoji */
import React from "react";
import { render } from "react-dom";
import Styles from "./Styles";
import { Form, Field } from "react-final-form";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";
import Radio from "@material-ui/core/Radio";
import FormLabel from "@material-ui/core/FormLabel";


const RadioWrapper = (props) => {
  const {
    input: { checked, value, name, onChange, ...restInput },
  } = props;

  return (
    <Radio
      name={name}
      inputProps={restInput}
      onChange={onChange}
      checked={checked}
      value={value}
    />
  );
};

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const onSubmit = async (values) => {
  await sleep(300);
  window.alert(JSON.stringify(values, 0, 2));
};

const App = () => {
  return (
    <Styles>
      <h1>React Final Form - Simple Example</h1>
      <a
        href="https://final-form.org/react"
        target="_blank"
        rel="noopener noreferrer"
      >
        Read Docs
      </a>
      <Form
        onSubmit={onSubmit}
        initialValues={{
          employed: false,
          all_sub_tenants: "true"
        }}
        render={({ handleSubmit, form, submitting, pristine, values }) => (
          <form onSubmit={handleSubmit}>
            <FormControl component="fieldset">
              <FormLabel component="legend">
                Select Tenants
              </FormLabel>
              <RadioGroup aria-label="allSubTenants" name="allSubTenants">
                <FormControlLabel
                  value="true"
                  control={
                    <Field
                      name="all_sub_tenants"
                      component={RadioWrapper}
                      type="radio"
                      value={"true"}
                    />
                  }
                  label="All Sub-Tenants"
                />
                <FormControlLabel
                  value="false"
                  control={
                    <Field
                      name="all_sub_tenants"
                      component={RadioWrapper}
                      type="radio"
                      value={"false"}
                    />
                  }
                  label="Select Sub-Tenants"
                />
              </RadioGroup>
            </FormControl>
            
            <div>
              <label>Notes</label>
              <Field name="notes" component="textarea" placeholder="Notes" />
            </div>
            <div className="buttons">
              <button type="submit" disabled={submitting || pristine}>
                Submit
              </button>
              <button
                type="button"
                onClick={form.reset}
                disabled={submitting || pristine}
              >
                Reset
              </button>
            </div>
            <pre>{JSON.stringify(values, 0, 2)}</pre>
          </form>
        )}
      />
    </Styles>
  );
};

render(<App />, document.getElementById("root"));