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

import React from 'react';
import { Form, Field } from 'react-final-form';
import { Radio } from '@material-ui/core';

const MyForm = () => {
  const handleRadioChange = (event) => {
    // 在此处处理单选按钮的变化事件
  };

  const handleSubmit = (values) => {
    // 在此处处理表单提交事件
  };

  return (
    <Form onSubmit={handleSubmit}>
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>
              <Field
                name="option"
                component="input"
                type="radio"
                value="option1"
                onChange={handleRadioChange}
              />
              Option 1
            </label>
          </div>
          <div>
            <label>
              <Field
                name="option"
                component="input"
                type="radio"
                value="option2"
                onChange={handleRadioChange}
              />
              Option 2
            </label>
          </div>
          {/* 其他表单字段 */}
          <button type="submit">提交</button>
        </form>
      )}
    </Form>
  );
};

export default MyForm;

import React from 'react';
import { Form, Field } from 'react-final-form';
import { Radio, TextField } from '@material-ui/core';

const MyForm = () => {
  const handleRadioChange = (event) => {
    // 获取选择的选项值
    const selectedOption = event.target.value;

    // 更新表单字段的值
    form.change('option', selectedOption);

    // 根据选项值禁用/启用其他元素
    if (selectedOption === 'option1') {
      form.change('otherField', ''); // 清空其他字段的值
      form.resetFieldState('otherField');
    } else {
      form.change('otherField', 'disabled');
      form.resetFieldState('otherField');
    }
  };

  const handleSubmit = (values) => {
    // 在此处处理表单提交事件
  };

  return (
    <Form onSubmit={handleSubmit}>
      {({ handleSubmit, form }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>
              <Field
                name="option"
                component="input"
                type="radio"
                value="option1"
                onChange={handleRadioChange}
              />
              Option 1
            </label>
          </div>
          <div>
            <label>
              <Field
                name="option"
                component="input"
                type="radio"
                value="option2"
                onChange={handleRadioChange}
              />
              Option 2
            </label>
          </div>
          <div>
            <Field
              name="otherField"
              render={({ input }) => (
                <TextField
                  {...input}
                  disabled={input.value === 'disabled'}
                  label="其他字段"
                />
              )}
            />
          </div>
          {/* 其他表单字段 */}
          <button type="submit">提交</button>
        </form>
      )}
    </Form>
  );
};

export default MyForm;