demo: improve the use of Segmented (#51324)

components/flex/demo/align.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, Flex, Segmented } from 'antd';
-import type { FlexProps, SegmentedProps } from 'antd';
+import type { FlexProps } from 'antd';
 
 const boxStyle: React.CSSProperties = {
   width: '100%',
@@ -26,9 +26,9 @@ const App: React.FC = () => {
   return (
     <Flex gap="middle" align="start" vertical>
       <p>Select justify :</p>
-      <Segmented options={justifyOptions} onChange={setJustify as SegmentedProps['onChange']} />
+      <Segmented options={justifyOptions} onChange={setJustify} />
       <p>Select align :</p>
-      <Segmented options={alignOptions} onChange={setAlignItems as SegmentedProps['onChange']} />
+      <Segmented options={alignOptions} onChange={setAlignItems} />
       <Flex style={boxStyle} justify={justify} align={alignItems}>
         <Button type="primary">Primary</Button>
         <Button type="primary">Primary</Button>

components/popover/demo/arrow.tsx

@@ -34,7 +34,7 @@ const App: React.FC = () => {
     <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>
       <Segmented
         options={['Show', 'Hide', 'Center']}
-        onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
+        onChange={setArrow}
         style={{ marginBottom: 24 }}
       />
       <Flex vertical justify="center" align="center" className="demo">

components/qr-code/demo/download.tsx

@@ -32,10 +32,7 @@ const App: React.FC = () => {
   const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');
   return (
     <Space id="myqrcode" direction="vertical">
-      <Segmented
-        options={['canvas', 'svg']}
-        onChange={(val) => setRenderType(val as QRCodeProps['type'])}
-      />
+      <Segmented options={['canvas', 'svg']} value={renderType} onChange={setRenderType} />
       <div>
         <QRCode
           type={renderType}

components/table/demo/virtual-list.tsx

@@ -168,7 +168,7 @@ const App: React.FC = () => {
           />
           <Segmented
             value={count}
-            onChange={(value: number) => setCount(value)}
+            onChange={setCount}
             options={[
               { label: 'None', value: 0 },
               { label: 'Less', value: 4 },

components/tabs/demo/custom-indicator.tsx

@@ -19,9 +19,9 @@ const App: React.FC = () => {
   return (
     <>
       <Segmented
-        defaultValue="center"
+        value={alignValue}
         style={{ marginBottom: 8 }}
-        onChange={(value) => setAlignValue(value as Align)}
+        onChange={setAlignValue}
         options={['start', 'center', 'end']}
       />
       <Tabs

components/tooltip/demo/arrow.tsx

@@ -28,7 +28,7 @@ const App: React.FC = () => {
       <Segmented
         value={arrow}
         options={['Show', 'Hide', 'Center']}
-        onChange={(val: 'Show' | 'Hide' | 'Center') => setArrow(val)}
+        onChange={setArrow}
         style={{ marginBottom: 24 }}
       />
       <Flex vertical justify="center" align="center" className="demo">