UrlField Url输入框
Url 输入框。
何时使用
当用户需要输入 URL 时。
代码演示
基本使用
基本使用。
import React from 'react';
import ReactDOM from 'react-dom';
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>,
document.getElementById('container')
);
受控输入框
受控输入框
import React from 'react';
import ReactDOM from 'react-dom';
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} />;
}
}
数据源
绑定数据源。
import React from 'react';
import ReactDOM from 'react-dom';
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 />,
document.getElementById('container')
);
API
内置 Url 格式校验的输入框。
更多属性请参考 TextField。
当前内容版权归 Choerodon UI 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 Choerodon UI .