TextField 文本输入框

文本输入框。

何时使用

• 需要用户输入表单域内容时。
• 提供组合型输入框，带搜索的输入框，限制输入配置等。

代码演示

基本使用

基本使用。

import React from 'react';
import ReactDOM from 'react-dom';
import { TextField, Row, Col } from 'choerodon-ui/pro';
​
function log(value) {
  console.log('[basic]', value);
}
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={8}>
      <TextField placeholder="请输入" onChange={log} />
    </Col>
    <Col span={8}>
      <TextField placeholder="清除按钮" defaultValue="点击清除" clearButton onChange={log} />
    </Col>
    <Col span={8}>
      <TextField value="不可用" disabled />
    </Col>
  </Row>,
  document.getElementById('container')
);
​

受控输入框

受控输入框

​
import React from 'react';
import ReactDOM from 'react-dom';
import { TextField } 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('[input]', e.target.value);
  }
​
  render() {
    return <TextField value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />;
  }
}
​

数据源

绑定数据源。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField } 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: 'first-name',
        type: 'string',
        defaultValue: 'Zhangsan',
        readOnly: true,
      },
    ],
    events: {
      update: handleDataSetChange,

Format

格式化。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField, Row, Col } 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: 'first-name',
        type: 'string',
        defaultValue: 'zhangsan',
        required: true,
        format: 'uppercase',
      },
      {
        name: 'middle-name',

只读

只读。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField, Row, Col, Button } from 'choerodon-ui/pro';
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [{ name: 'bind', readOnly: true, defaultValue: 'zhangsan' }],
  });
​
  handleClick = () => {
    this.ds.getField('bind').readOnly = false;
  };
​
  render() {
    return (
      <Row gutter={10}>
        <Col span="12">
          <TextField placeholder="只读" readOnly />
        </Col>
        <Col span="6">
          <TextField
            dataSet={this.ds}
            name="bind"
            placeholder="DataSet限定只读"
            clearButton
          />
        </Col>

数据索引

使用dataIndex进行指定数据所在数据源的索引，默认取数据源的当前索引。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField, Row, Col } from 'choerodon-ui/pro';
​
const data = [
  { bind: 'data1' },
  { bind: 'data2' },
  { bind: 'data3' },
];
​
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'bind' },
    ],
    data,
  });
​
  render() {
    return (
      <Row gutter={10}>
        <Col span="8">
          <TextField dataSet={this.ds} name="bind" dataIndex={0} />
        </Col>
        <Col span="8">
          <TextField dataSet={this.ds} name="bind" dataIndex={1} />
        </Col>
        <Col span="8">

前后缀

前后缀。

import React from 'react';
import ReactDOM from 'react-dom';
import { TextField, Row, Col, Icon } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <Row gutter={10}>
    <Col span={12}>
      <TextField placeholder="前缀" prefix={<Icon type="person" />} />
    </Col>
    <Col span={12}>
      <TextField placeholder="后缀" suffix={<Icon type="person" />} />
    </Col>
  </Row>,
  document.getElementById('container')
);
​

多值

通过属性multiple设置为多值。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField, Row, Col } from 'choerodon-ui/pro';
​
function handleChange(value, oldValue) {
  console.log('[multiple]', value, '[oldValue]', oldValue);
}
​
function handleDataSetChange({ record, name, value, oldValue }) {
  console.log('[dataset multiple]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
}
​
class App extends React.Component {
  ds = new DataSet({
    autoCreate: true,
    fields: [
      { name: 'user', type: 'string', label: '用户', defaultValue: '', required: true, multiple: ',' },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
​
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <TextField dataSet={this.ds} name="user" placeholder="数据源多选" />

渲染器

渲染器。

​
import React from 'react';
import ReactDOM from 'react-dom';
import { DataSet, TextField, Icon, Row, Col } from 'choerodon-ui/pro';
​
function valueRenderer({ value }) {
  return `${value}个`;
}
​
function colorRenderer({ text }) {
  return <span style={{ color: 'red' }}>{text}</span>;
}
​
class App extends React.Component {
  ds = new DataSet({
    data: [{ count: '30' }],
    fields: [{ name: 'count' }],
  });
​
  render() {
    return (
      <Row gutter={10}>
        <Col span="12">
          <TextField value="50" renderer={valueRenderer} />
        </Col>
        <Col span="12">
          <TextField
            dataSet={this.ds}
            name="count"

限制输入

限制输入。

import React from 'react';
import ReactDOM from 'react-dom';
import { TextField } from 'choerodon-ui/pro';
​
ReactDOM.render(
  <TextField placeholder="限制数字" restrict="0-9" />,
  document.getElementById('container')
);
​

API

更多属性请参考 FormField。