在 Ant 设计表单中显示无线电选项的自定义消息

Question

I'm using Radio.Group in Ant Design form and depending on the option I would like to display a custom message below. I'm trying to use form.getFieldValue() and my code looks like this, but it doesn't work. How can I fix it?

const options = [
  {
    value: 1,
    label: "Option 1"
  },
  {
    value: 2,
    label: "Option 2"
  }
];

const Demo = () => {
  const [form] = Form.useForm();
  const { getFieldValue } = form;

  return (
    <Form
      form={form}
      initialValues={{
        radio: 1
      }}
    >
      <Form.Item
        label="Radio Group"
        name="radio"
      >
        <Radio.Group options={options} />
      </Form.Item>
      {getFieldValue("radio") === 1 && <div>This is option 1</div>}
      {getFieldValue("radio") === 2 && <div>This is option 2</div>}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Here is my codesandbox .

Answer 1

I think it's will help you to understand

const Demo = () => {
  const [form] = Form.useForm();
  const { getFieldValue, validateFields } = form;
  const [radioValue, setRadioValue] = useState(1);
  const onValidateForm = async () => {
    const value = await validateFields();
    window.alert(JSON.stringify(value, 2));
  };

  return (
    <Form
      {...layout}
      form={form}
      name="basic"
      initialValues={{
        radio: 1
      }}
    >
      <Form.Item label="Options" name="radio">
        <Radio.Group options={options} onChange={e => setRadioValue(e.target.value)} />
      </Form.Item>
      {radioValue === 1 && <div>This is option 1</div>}
      {radioValue === 2 && <div>This is option 2</div>}
      <Form.Item>
        <Button type="primary" htmlType="submit" onClick={onValidateForm}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};