UrlFieldUrl输入框

Url输入框。

何时使用

代码演示

UrlFieldUrl 输入框 - 图1

基本使用

基本使用。

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

UrlFieldUrl 输入框 - 图2

数据源

绑定数据源。

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

UrlFieldUrl 输入框 - 图3

受控输入框

受控输入框

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

API

UrlField

更多属性请参考 TextField