UrlFieldUrl输入框

Url输入框。

何时使用

代码演示

基本使用

基本使用。

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

数据源

绑定数据源。

import { DataSet, UrlField } 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: 'url', type: 'url', defaultValue: 'https://choerodon.io', required: true },
    ],
    events: {
      update: handleDataSetChange,
    },
  });
  render() {
    return <UrlField dataSet={this.ds} name="url" />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

受控输入框

受控输入框

import { UrlField } 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 <UrlField value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />;
  }
}
ReactDOM.render(
  <App />,
  mountNode
);

API

UrlField

更多属性请参考 TextField。