ant-design/components/input/demo/autosize-textarea.md
二货机器人 b9b9675fe1
fix: Not shaking with autosize of TextArea (#18401)
* fix: Not shaking with autosize of TextArea

* fix ract 15 demo

* fix demo

* add state

* handle event

* try to fix react 15 test case
2019-08-22 11:55:37 +08:00

1.4 KiB

order title
6
zh-CN en-US
适应文本高度的文本域 Autosizing the height to fit the content

zh-CN

autosize 属性适用于 textarea 节点,并且只有高度会自动变化。另外 autosize 可以设定为一个对象,指定最小行数和最大行数。

en-US

autosize prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to autosize to specify the minimum and maximum number of lines the textarea will automatically adjust.

import { Input } from 'antd';

const { TextArea } = Input;

class Demo extends React.Component {
  state = {
    value: '',
  };

  onChange = ({ target: { value } }) => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;

    return (
      <div>
        <TextArea placeholder="Autosize height based on content lines" autosize />
        <div style={{ margin: '24px 0' }} />
        <TextArea
          placeholder="Autosize height with minimum and maximum number of lines"
          autosize={{ minRows: 2, maxRows: 6 }}
        />
        <div style={{ margin: '24px 0' }} />
        <TextArea
          value={value}
          onChange={this.onChange}
          placeholder="Controlled autosize"
          autosize={{ minRows: 3, maxRows: 5 }}
        />
      </div>
    );
  }
}

ReactDOM.render(<Demo />, mountNode);