[英]Material-ui radio button not working together with react-final-form
我的 material-ui 单选按钮最初可以工作,但是当我使用 react-final-form 实现时,我可以工作。 现在的问题是该单选按钮根本不可点击,但是当我删除...input
内的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>
)
}
所以基本上,我想要的是当用户点击 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>
)
}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.