mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 12:28:33 +08:00
502dac12aa
* docs: fix code * feat: lint * feat: prettier * feat: test * feat: review * feat: format html * feat: format html
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;
|