IntlField多语言输入框

表单控件。

何时使用

代码演示

数据源

绑定数据源。

import { DataSet, IntlField, 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({
    primaryKey: 'pk',
    data: [{ 'first-name': '吴' }],
    tlsUrl: '/dataset/user/languages',
    fields: [{ name: 'first-name', type: 'intl', defaultValue: 'Huazhen', required: true }],
    events: {
      update: handleDataSetChange,
    },
  });
  ds2 = new DataSet({
    lang: 'en_GB',
    primaryKey: 'pk',
    data: [{}],
    tlsUrl: '/dataset/user/languages',
    fields: [{ name: 'first-name', type: 'intl', required: true }],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return (
      <Row gutter={10}>
        <Col span={12}>
          <IntlField dataSet={this.ds} name="first-name" />
        </Col>
        <Col span={12}>
          <IntlField placeholder="默认英文" dataSet={this.ds2} name="first-name" />
        </Col>
      </Row>
    );
  }
}
ReactDOM.render(<App />, mountNode);

API

IntlField

多语言输入框

更多属性请参考 ViewComponent。