ant-design/components/input/demo/textarea-resize.tsx
二货爱吃白萝卜 a1eb00bb9b
refactor: TextArea resize with React life cycle (#53235)
* chore: move style

* refactor: use react life cycle

* chore: adjust style

* test: fix test logic

* test: update snapshot

* test: coverage
2025-03-21 14:56:10 +08:00

31 lines
1.1 KiB
TypeScript

import React, { useState } from 'react';
import { Button, Input } from 'antd';
const { TextArea } = Input;
const defaultValue =
'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
const App: React.FC = () => {
const [autoResize, setAutoResize] = useState(false);
return (
<>
<Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
Auto Resize: {String(autoResize)}
</Button>
<TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
<TextArea allowClear style={{ width: 93 }} />
<br />
<TextArea
style={{
resize: 'both',
}}
showCount
/>
</>
);
};
export default App;