UrlField Url输入框

Url 输入框。

何时使用

当用户需要输入 URL 时。

代码演示

基本使用

基本使用。

UrlFieldUrl输入框 - 图1

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { UrlField, Row, Col } from 'choerodon-ui/pro';
  4. function log(value) {
  5. console.log('[basic]', value);
  6. }
  7. ReactDOM.render(
  8. <Row gutter={10}>
  9. <Col span={8}>
  10. <UrlField placeholder="请输入" onChange={log} />
  11. </Col>
  12. <Col span={8}>
  13. <UrlField placeholder="清除按钮" defaultValue="点击清除" clearButton onChange={log} />
  14. </Col>
  15. <Col span={8}>
  16. <UrlField value="不可用" disabled />
  17. </Col>
  18. </Row>,
  19. document.getElementById('container')
  20. );

受控输入框

受控输入框

UrlFieldUrl输入框 - 图2

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { UrlField } from 'choerodon-ui/pro';
  4. class App extends React.Component {
  5. constructor(props) {
  6. super(props);
  7. this.state = {
  8. value: 'default',
  9. };
  10. }
  11. handleChange = (value, oldValue) => {
  12. console.log('[newValue]', value, '[oldValue]', oldValue);
  13. this.setState({
  14. value,
  15. });
  16. }
  17. handleInput = (e) => {
  18. console.log('[input]', e.target.value);
  19. }
  20. render() {
  21. return <UrlField value={this.state.value} onChange={this.handleChange} onInput={this.handleInput} />;
  22. }
  23. }

数据源

绑定数据源。

UrlFieldUrl输入框 - 图3

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import { DataSet, UrlField } from 'choerodon-ui/pro';
  4. function handleDataSetChange({ record, name, value, oldValue }) {
  5. console.log('[dataset newValue]', value, '[oldValue]', oldValue, `[record.get('${name}')]`, record.get(name));
  6. }
  7. class App extends React.Component {
  8. ds = new DataSet({
  9. autoCreate: true,
  10. fields: [
  11. { name: 'url', type: 'url', defaultValue: 'https://choerodon.io', required: true },
  12. ],
  13. events: {
  14. update: handleDataSetChange,
  15. },
  16. });
  17. render() {
  18. return <UrlField dataSet={this.ds} name="url" />;
  19. }
  20. }
  21. ReactDOM.render(
  22. <App />,
  23. document.getElementById('container')
  24. );

API

内置 Url 格式校验的输入框。

更多属性请参考 TextField