Material-UI Radio Button与React Final Form集成后无法点击的问题求助

我完全懂你遇到的麻烦——把React Final Form的input对象塞到Material-UI Radio的inputProps里后，单选按钮直接失效，去掉...input又恢复正常，但你不想用现成的封装库。其实问题出在对Final Form的input对象的使用方式上，下面给你具体的解决方案：

问题根源 #

React Final Form的input对象包含了onChange、checked、name等核心控制属性，你把...input放到inputProps里，相当于把这些属性传递给了Radio组件底层的原生<input>元素，这会直接覆盖你自己设置的checked和onChange逻辑，同时打乱Material-UI组件的状态控制机制，导致按钮点击无响应。

正确的集成方式 #

你需要把input对象的属性直接传递给Radio组件的props，而不是inputProps，同时协调本地状态和Final Form的表单状态，具体修改如下：

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

// 假设你的StyledRadioButton是基于MuiRadio封装的
const StyledRadioButton = MuiRadio;
const StyledRadioBox = Box;

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

  const handleBtn = useCallback(
    (value, finalFormOnChange) => {
      // 同时更新本地状态和Final Form的表单状态
      setFood(value)
      finalFormOnChange(value)
    },
    [setFood]
  )

  return (
    <div>
      <Field name="food" type="radio" value="orange" render={({ input, meta }) => (
        <StyledRadioBox>
          <StyledRadioButton
            // 用本地状态控制选中状态
            checked={food === 'orange'}
            // 同时触发本地状态更新和Final Form的表单同步
            onChange={() => handleBtn('orange', input.onChange)}
            value="orange"
            // 统一使用Field的name，保证单选按钮互斥
            name={input.name}
            inputProps={{
              'aria-label': 'orange',
              // 这里不再放置...input
            }}
            // 传递input中的非冲突属性（如id、ref等）
            {...input}
            // 覆盖input中的checked和onChange，确保使用自定义逻辑
            checked={food === 'orange'}
            onChange={() => handleBtn('orange', input.onChange)}
          />
        </StyledRadioBox>
      )} />
      <Field name="food" type="radio" value="grapes" render={({ input, meta }) => (
        <StyledRadioBox>
          <StyledRadioButton
            checked={food === 'grapes'}
            onChange={() => handleBtn('grapes', input.onChange)}
            value="grapes"
            name={input.name}
            inputProps={{
              'aria-label': 'grapes',
            }}
            {...input}
            checked={food === 'grapes'}
            onChange={() => handleBtn('grapes', input.onChange)}
          />
        </StyledRadioBox>
      )} />
    </div>
  )
}

关键修改点说明 #

• 移除inputProps里的...input：Final Form的input属性要直接传递给Radio组件本身，而不是它的底层原生input元素。
• 同步本地状态与Final Form状态：在handleBtn中同时调用本地的setFood和Final Form的input.onChange，既保留你自定义的状态逻辑，又能让Final Form同步表单值。
• 统一单选按钮的name：同组的单选按钮必须使用同一个name（即Field的name），之前给每个按钮设置不同name会导致它们不属于同一组，无法实现互斥选择。
• 覆盖冲突属性：因为...input会自带checked和onChange，所以需要在展开后重新设置这两个属性，确保使用我们自己的状态控制逻辑。

这样修改后，你的单选按钮就能正常点击，同时也能和React Final Form正确集成了。

内容的提问来源于stack exchange，提问作者devjson