TextField文本输入框

文本输入框。

何时使用

代码演示

基本使用

基本使用。

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>,
  mountNode
);

数据源

绑定数据源。

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: 'Huazhen', required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return <TextField dataSet={this.ds} name="first-name" />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

只读

只读。

import { DataSet, TextField, Row, Col, Button } from 'choerodon-ui/pro';
class App extends React.Component {
  ds = new DataSet({
    fields: [
      { name: 'bind', readOnly: true },
    ],
  });
  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限定只读" />
        </Col>
        <Col span="6">
          <Button onClick={this.handleClick}>解除只读</Button>
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

前后缀

前后缀。

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>,
  mountNode
);

渲染器

渲染器。

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"
            renderer={colorRenderer}
            prefix={<Icon type="person" />}
            suffix={<Icon type="dehaze" />}
          />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

受控输入框

受控输入框

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} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

Format

格式化。

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: 'huazhen',
        required: true,
        format: 'uppercase',
      },
      {
        name: 'middle-name',
        type: 'string',
        defaultValue: 'HUGH',
        required: true,
        format: 'lowercase',
      },
      {
        name: 'last-name',
        type: 'string',
        defaultValue: 'wu',
        required: true,
        format: 'capitalize',
      },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row>
        <Col span={8}>
          <TextField dataSet={this.ds} name="first-name" />
        </Col>
        <Col span={8}>
          <TextField dataSet={this.ds} name="middle-name" />
        </Col>
        <Col span={8}>
          <TextField dataSet={this.ds} name="last-name" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

数据索引

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

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">
          <TextField dataSet={this.ds} name="bind" dataIndex={2} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

多值

通过属性multiple设置为多值。

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="数据源多选" />
        </Col>
        <Col span={12}>
          <TextField multiple onChange={handleChange} placeholder="多选" defaultValue={['wu']} />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

限制输入

限制输入。

import { TextField } from 'choerodon-ui/pro';
ReactDOM.render(
  <TextField placeholder="限制数字" restrict="0-9" />,
  mountNode
);

API

TextField

更多属性请参考 FormField。