mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-24 15:46:10 +08:00
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
|
import React, { useRef, useState } from 'react';
|
||
|
import type { InputRef } from 'antd';
|
||
|
import { Button, Input, Space, Switch } from 'antd';
|
||
|
|
||
|
const App: React.FC = () => {
|
||
|
const inputRef = useRef<InputRef>(null);
|
||
|
const [input, setInput] = useState(true);
|
||
|
|
||
|
const sharedProps = {
|
||
|
style: { width: '100%' },
|
||
|
defaultValue: 'Ant Design love you!',
|
||
|
ref: inputRef,
|
||
|
};
|
||
|
|
||
|
return (
|
||
|
<Space direction="vertical" style={{ width: '100%' }}>
|
||
|
<Space wrap>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
inputRef.current!.focus({
|
||
|
cursor: 'start',
|
||
|
});
|
||
|
}}
|
||
|
>
|
||
|
Focus at first
|
||
|
</Button>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
inputRef.current!.focus({
|
||
|
cursor: 'end',
|
||
|
});
|
||
|
}}
|
||
|
>
|
||
|
Focus at last
|
||
|
</Button>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
inputRef.current!.focus({
|
||
|
cursor: 'all',
|
||
|
});
|
||
|
}}
|
||
|
>
|
||
|
Focus to select all
|
||
|
</Button>
|
||
|
<Button
|
||
|
onClick={() => {
|
||
|
inputRef.current!.focus({
|
||
|
preventScroll: true,
|
||
|
});
|
||
|
}}
|
||
|
>
|
||
|
Focus prevent scroll
|
||
|
</Button>
|
||
|
<Switch
|
||
|
checked={input}
|
||
|
checkedChildren="Input"
|
||
|
unCheckedChildren="TextArea"
|
||
|
onChange={() => {
|
||
|
setInput(!input);
|
||
|
}}
|
||
|
/>
|
||
|
</Space>
|
||
|
<br />
|
||
|
{input ? <Input {...sharedProps} /> : <Input.TextArea {...sharedProps} />}
|
||
|
</Space>
|
||
|
);
|
||
|
};
|
||
|
|
||
|
export default App;
|