React Final Form 和 Material UI，选择特定单选按钮时禁用元素

Question

React Final Form 的新手并使用 Material UI 创建表单。我有一个默认情况下禁用的日期选择器，并希望在选择某个无线电时启用它。我不确定如何获取表单以在选择 'schedule' 单选按钮时启用选择器并在未选择时禁用它。

我的广播组组件：

<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} />

Answer 1

您需要在 Schedule 组件中获取单选字段状态。从最终表格文档中检查此 link：https://codesandbox.io/embed/pyrwplknom?codemirror=1

React Final Form 和 Material UI，选择特定单选按钮时禁用元素

React Final Form and Material UI, disabling element when specific radio button is selected

reactjs

material-ui

react-final-form