微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React Final Form and Material UI,在选择特定单选按钮时禁用元素

如何解决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 举报,一经查实,本站将立刻删除。