改为使用按钮将Radios组返回给ReactFinalForm的值更改

如何解决改为使用按钮将Radios组返回给ReactFinalForm的值更改

我正在尝试开发一个组件，该组件将返回一种形式，即按三个（或三个以上）按钮的值。由于这实际上是一个无线电输入，因此我认为我会使用一批隐藏的无线电，并使用按钮设置的状态值来更新无线电输入值。

如果有人有更好的建议，我完全可以采用另一种方法。但是我试图避免覆盖Radio的Material UI样式。也许那毕竟是我应该做的，我不知道。

我已经参加了几天，并且没有取得任何进展，所以任何建议都值得赞赏。

import React,{ useState } from "react";

import { Box,Typography } from "@material-ui/core";
import clsx from "clsx";
import { ToggleButton,ToggleButtonGroup } from "@material-ui/lab";
import { Radios } from "mui-rff";

const InputTripletButton = ({ name,options = null,defaultValue = false }) => {
  const defaultOptions = [
    { value: true,label: "Yes" },{ value: false,label: "No" },label: "I'm not sure" },];
  const buttonoptions = options ? options : defaultOptions;

  const [selectOptionIndex,setSelectOptionIndex] = useState([]);
  const [selectedValue,setSelectedValue] = useState(defaultValue);
  const handleClick = (value,idx) => {
    setSelectOptionIndex(idx);
    setSelectedValue(value);
    console.log(value);
  };
  return (
    <>
      {console.log(selectedValue,"selectedValue")}
      <Radios
        label="Pick one..."
        name={name}
        formControlProps={{ margin: "none" }}
        radioGroupProps={{ value: selectedValue,onChange: console.log('changed') }}
        data={[
          { label: "item 1",value: true,checked: true },{ label: "item 2",value: false,checked: false },]}
      />
      <ToggleButtonGroup>
        {buttonoptions.map((v,idx) => {
          return (
            <ToggleButton
              color="primary"
              variant="outlined"
              key={idx}
              value={v.value}
              className={clsx("button-options-button",{
                selected: selectOptionIndex === idx,})}
              size={selectOptionIndex === idx ? "large" : "small"}
              onClick={() => handleClick(v.value,idx)}
            >
              <Box className="property-type" p={1}>
                <Typography
                  variant="subtitle1"
                  color={selectOptionIndex[idx] ? "secondary" : "primary"}
                  component="div"
                >
                  <Box
                    fontWeight={
                      selectOptionIndex[idx] ? "bold" : "fontWeightLight"
                    }
                  >
                    {v.label}
                  </Box>
                </Typography>
              </Box>
            </ToggleButton>
          );
        })}
        ;
      </ToggleButtonGroup>
    </>
  );
};

export default InputTripletButton;