Material-ui单选按钮不能与react-final-form一起使用

Question

我的material-ui单选按钮最初是有效的，但当我使用react-final-form实现时，我可以正常工作。现在的问题是，这个单选按钮根本无法单击，但当我删除...input inside inputProps单选按钮时，它就可以工作了。

我知道有一个material-ul react-final-form包装器https://github.com/Deadly0/final-form-material-ui，但我现在不想使用它。

有什么帮助吗？

import { Box, Typography } from '@material-ui/core'
import { useCallback, useState } from 'react'
import { useContext } from '/form-context'
import { Field } from 'react-final-form'

const GetFruitFav = () => {
  const { values, setValues } = useContext()
  const { favFruits = 'orange' } = values || {}
  const [food, setFood] = useState(favFruits)

  const handleBtn = useCallback(
    (value) => {
      setFood(value)
    },
    [setFood]
  )

  return (
    <div>
          <Field
            name="food"
            type="radio"
            render={({ input, meta }) => (
              <StyledRadioBox>
                <StyledRadioButton
                  checked={food === 'orange'}
                  onChange={() => handleBtn('orange')}
                  value="orange"
                  name="orange"
                  inputProps={{
                    'aria-label': 'orange',
                    ...input,
                  }}
                />
              </StyledRadioBox>
            )}
          />
       
          <Field
            name="food"
            type="radio"
            render={({ input, meta }) => (
              <>
                <StyledRadioBox>
                  <StyledRadioButton
                    checked={food === 'grapes'}
                    onChange={() => handleBtn('grapes')}
                    value="grapes"
                    name="grapes"
                    inputProps={{
                      'aria-label': 'grapes',
                      ...input,
                    }}
                  />
                </StyledRadioBox>
              </>
            )}
          />
       </div>
  )
}

Answer 1

所以基本上，我想要的是当用户点击material-ui单选按钮时，这将保存到我的react上下文中，同时react-final-form也将保存这些值。

我通过重构我的代码解决了这个问题

<Field
name = "food"
value = "orange"
type = "radio"
render = { ({ input: { checked, onChange, value, ..rest}, meta }) => ( 
     <StyledRadioBox >
        <StyledRadioButton checked = {checked}
        // let react-final-form handle this not material-ui
        onChange = {
            (event) => {
                onChange(event)
                handleBtn(value) 
           // uncontrolled let react-final-form handle the values instead of adding manually

            }
        }
        inputProps = {
            {
                'aria-label': 'orange',
                 value,
                ...rest,
                  
            }
        }
        /> 
    </StyledRadioBox>
    )
}
/>