TextArea 文本域

文本域用于多行输入。

何时使用

当用户需要多行输入内容时。

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea, Row, Col } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={8}>
      <TextArea placeholder="Basic usage" />
    </Col>
    <Col span={8}>
      <TextArea placeholder="readOnly" readOnly />
    </Col>
    <Col span={8}>
      <TextArea placeholder="disabled" disabled />
    </Col>
  </Row>,
  document.getElementById('container'),
);
​

受控输入框

受控输入框

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea } from 'choerodon-ui/pro';
​
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 'default',
    };
  }
​
  handleChange = (value, oldValue) => {
    console.log('[newValue]', value, '[oldValue]', oldValue);
    this.setState({
      value,
    });
  };
​
  handleInput = e => {
    console.log('[textarea]', e.target.value);
  };
​
  render() {
    return (
      <TextArea value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />
    );
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));

数据绑定

数据绑定

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea, DataSet } from 'choerodon-ui/pro';
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log(
    '[dataset newValue]',
    value,
    '[oldValue]',
    oldValue,
    `[record.get('${name}')]`,
    record.get(name),
  );
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      {
        name: 'content',
        type: 'string',
        defaultValue: 'textarea',
        required: true,
      },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​

拖拽调整大小

拖拽调整大小

import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea, Row, Col } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={8}>
      <TextArea placeholder="resize both" resize="both" cols={40} />
    </Col>
    <Col span={8}>
      <TextArea placeholder="resize vertical" resize="vertical" cols={40} />
    </Col>
    <Col span={8}>
      <TextArea placeholder="resize horizontal" resize="horizontal" cols={40} />
    </Col>
  </Row>,
  document.getElementById('container')
);
​

适应文本高度

autoSize 属性默认只有高度会自动变化。另外 autoSize 可以设定为一个对象，指定最大最小行列数。

import React from 'react';
import ReactDOM from 'react-dom';
import { TextArea } from 'choerodon-ui/pro';
​
class App extends React.Component {
​
  render() {
    return (
      <TextArea
        placeholder="适应文本高度"
        autoSize={{ minRows: 2, maxRows: 8 }}
      />
    );
  }
}
​
ReactDOM.render(<App />, document.getElementById('container'));
​

API

更多属性请参考 FormField。