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

【问题标题】：Material-ui radio button not working together with react-final-formMaterial-ui 单选按钮不能与 react-final-form 一起使用
【发布时间】：2021-01-19 13:12:51
【问题描述】：

我的 material-ui 单选按钮最初可以工作，但是当我使用 react-final-form 实现时，我可以工作。现在的问题是该单选按钮根本不可点击，但是当我删除 inputProps 内的 ...input 单选按钮时有效。

我知道有一个 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>
  )
}

【问题讨论】：

标签： javascript reactjs material-ui react-final-form

【解决方案1】：

所以基本上，我想要的是当用户单击 material-ui 单选按钮时，这将保存到我的反应上下文中，同时 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>
    )
}
/>

【讨论】：