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