antd，Radio组件放到Form中，如何默认选中

Question

Radio组件默认没有选中，请问是什么原因？代码如下：

const {  Form, Input, Button, Checkbox, Radio  } = antd;
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
     <Form.Item
          label="服务类型"
          name="serviceType">
            <Radio.Group  value={1}>
              <Radio value={1}>JSF</Radio>
              <Radio value={2}>HTTP</Radio>
            </Radio.Group>
    </Form.Item>

      <Form.Item
        label="Password"
        name="password"
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item {...tailLayout} name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, mountNode);

Answer 1

AntD 的表单一直依赖都是使用的 initialValues 这个属性来设置初始值，Radio组件放到Form表单中也是一样。
以下是一段伪代码：

const Demo = () => {
  return (
    <Form
      name="validate_other"
      {...formItemLayout}
      onFinish={onFinish}
      initialValues={{
        'radio-group': 'c',
      }}
    >
      <Form.Item name="radio-group" label="Radio.Group">
        <Radio.Group>
          <Radio value="a">item 1</Radio>
          <Radio value="b">item 2</Radio>
          <Radio value="c">item 3</Radio>
        </Radio.Group>
      </Form.Item>
    </Form>
  );
};

可以看一下表单组件的文档 表单 Form - Ant Design

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。