如何解决React Final Form and Material UI,在选择特定单选按钮时禁用元素
React Final Form的新功能,并使用Material UI创建一个表单。我默认情况下禁用了日期选择器,并希望在选择某个收音机时启用它。我不确定如何在选中“计划”单选按钮时获取表单以启用选择器,而在未选择表单时禁用该表单。
我的广播组组件:
<RadioGroup defaultValue={defaultVal} name={name}>
{items.map(item => (
<React.Fragment key={item.value}>
<FormControlLabel
name={item.name}
label={item.label}
value={item.value}
control={
<Field
name={name}
type="radio"
render={({ input: { name,label,value,onChange } }) => (
<Radio
name={name}
label={label}
value={value}
onChange={onChange}
/>
)}
/>
}
/>
</React.Fragment>
))}
</RadioGroup>
表单组件:
const items=[
{
name: 'send',value: 'immediately',label: 'Immediately
},{
name: 'send',value: 'schedule',label: 'Schedule
}
]
<Form onSubmit={onSubmit}>
{({ handleSubmit }) => (
<form onSubmit={handleSubmit}>
<Schedule items={items} />
...
</form>
)}
</Form>
我的计划组件:
<RadioGroup name="options" defaultValue="immediately" items={items}/>
<TimePicker disabled={true} />
解决方法
您需要在Schedule组件中获取无线电字段状态。检查来自最终形式文档的以下链接:https://codesandbox.io/embed/pyrwplknom?codemirror=1
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。