ant-design/components/radio/demo/radiogroup-more.tsx
lijianan e8fa5938ab
site: rewrite with CSS logical properties (#50109)
* site: use CSS logical properties

* Update components/anchor/demo/targetOffset.tsx

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: lijianan <574980606@qq.com>

* fix: fix

* fix: fix

* chore: fix

* fix: add more

* fix: add more

---------

Signed-off-by: lijianan <574980606@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-07-28 10:43:45 +08:00

29 lines
773 B
TypeScript

import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Input, Radio, Space } from 'antd';
const App: React.FC = () => {
const [value, setValue] = useState(1);
const onChange = (e: RadioChangeEvent) => {
console.log('radio checked', e.target.value);
setValue(e.target.value);
};
return (
<Radio.Group onChange={onChange} value={value}>
<Space direction="vertical">
<Radio value={1}>Option A</Radio>
<Radio value={2}>Option B</Radio>
<Radio value={3}>Option C</Radio>
<Radio value={4}>
More...
{value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
</Radio>
</Space>
</Radio.Group>
);
};
export default App;